initial commit.

views/partials/tool/text-align.html

+<div class="dialog-section no-b no-p">
+  <div class="btn-group">
+    <button class="btn btn-transparent btn-icon" v-on:click="set_artifact_style_prop('align','left')">
+      <span class="icon icon-text-align-left-alt"></span>
+    </button>
+    <button class="btn btn-transparent btn-icon" v-on:click="set_artifact_style_prop('align','center')">
+      <span class="icon icon-text-align-center-alt"></span>
+    </button>
+    <button class="btn btn-transparent btn-icon" v-on:click="set_artifact_style_prop('align','right')">
+      <span class="icon icon-text-align-right-alt"></span>
+    </button>
+    <button class="btn btn-transparent btn-icon" v-on:click="set_artifact_style_prop('align','justify')">
+      <span class="icon icon-text-align-justify-alt"></span>
+    </button>
+
+    <button class="btn btn-divider"></button>
+    
+    <button class="btn btn-transparent btn-icon" v-on:click="set_artifact_style_prop('valign','top')">
+      <span class="icon icon-align-vertical-top"></span>
+    </button>
+    <button class="btn btn-transparent btn-icon" v-on:click="set_artifact_style_prop('valign','middle')">
+      <span class="icon icon-align-vertical-middle"></span>
+    </button>
+    <button class="btn btn-transparent btn-icon" v-on:click="set_artifact_style_prop('valign','bottom')">
+      <span class="icon icon-align-vertical-bottom"></span>
+    </button>
+  </div>
+</div>

views/partials/tool/text-columns.html

+<h4 class="dialog-title">Columns</h4>
+
+<div id="type-columns" class="relative">
+  <div class="dialog-section no-p">
+    <div class="form-group no-m">
+      <!-- <label class="label label-sm">Columns</label> -->
+      <input class="input no-b no-p text-center text-large" spellcheck="false" type="text" pattern="[0-9]" maxlength="10" v-model="active_style.columns">
+
+      <button class="btn-more btn btn-icon btn-transparent" v-on="click:increase_columns()"> </button>
+      <button class="btn-less btn btn-icon btn-transparent" v-on="click:decrease_columns()"> </button>
+    </div>
+  </div>
+
+  <div class="dialog-section no-p-b no-p-h">
+    <div class="form-group no-m">
+      <label class="label label-sm text-center">Gutter</label>
+      <input class="input no-b no-p text-center" spellcheck="false" type="text" pattern="[0-9\.]" maxlength="3" v-model="active_style.gutter">
+      <button tabindex="-1" class="input-drag btn btn-transparent btn-icon" style="cursor: ns-resize;" v-sd-fader="true" sd-fader-var-y="active_style.gutter" sd-fader-min-y="0" sd-fader-max-y="200" sd-fader-step="1">
+        <span class="icon icon-triangles-vertical"></span>
+      </button>
+      <span class="input-unit">px</span>
+    </div>
+  </div>
+</div>
+

views/partials/tool/text-digits.html

+<div id="typography" class="relative">
+
+  <div id="font">
+    <ul class="select-list overflow-y-scroll" style="max-height:315px;width:240px">
+      <li v-bind:class="{checked:active_font==font}" 
+        v-for="font in fonts" 
+          v-on:mousedown="apply_font($event,font)"
+          v-on:touchstart="apply_font($event,font)">
+          <span v-bind:style="{'font-family': font}">{{font}}</span>
+        </li>
+    </ul>
+  </div>
+</div>

views/partials/tool/text-formats.html

+<h4 class="dialog-title">[[__("text_formats")]]</h4>
+
+<ul class="select-list overflow-y-scroll" style="min-width: 200px;">
+  <li id="note-format-div" v-on="mousedown:apply_formatting($event, 'p')"> <span>[[__("format_p")]]</span> </li>
+  <li id="note-format-ul"  v-on="mousedown:apply_formatting($event, 'insertunorderedlist')"> <span>[[__("format_bullets")]]</span> </li>
+  <li id="note-format-ol"  v-on="mousedown:apply_formatting($event, 'insertorderedlist')"> <span>[[__("format_numbers")]]</span> </li>
+  <li id="note-format-h1"  v-on="mousedown:apply_formatting($event, 'h1')"> <span>[[__("format_h1")]]</span> </li>
+  <li id="note-format-h2"  v-on="mousedown:apply_formatting($event, 'h2')"> <span>[[__("format_h2")]]</span> </li>
+  <li id="note-format-h3"  v-on="mousedown:apply_formatting($event, 'h3')"> <span>[[__("format_h3")]]</span> </li>
+</ul>
+
+<!-- 
+<div class="dialog-section no-p noflex">
+  <button class="btn btn-transparent btn-block text-center"> Create New </button>
+  <div class="btn-cluster">
+    <button class="btn btn-transparent text-center"> Save </button>
+    <button class="btn btn-transparent btn-block text-center"> Delete </button>
+  </div>
+</div>
+ -->

views/partials/tool/text-styles.html

+
+<div class="dialog-section no-b no-p">
+  <div class="btn-group">
+    <!-- <button class="btn btn-transparent btn-icon" ng-click="apply_formatting('caps')">
+      <span class="icon icon-text-allcaps"></span>
+    </button> -->
+    <button class="btn btn-transparent btn-icon-labeled" v-on:click="apply_formatting($event,'bold')">
+      <span class="icon icon-text-bold"></span>
+      <span class="icon-label">Bold</span>
+    </button>
+    <button class="btn btn-transparent btn-icon-labeled" v-on:click="apply_formatting($event,'italic')">
+      <span class="icon icon-text-italic"></span>
+      <span class="icon-label">Italic</span>
+    </button>
+    <button class="btn btn-transparent btn-icon-labeled" v-on:click="apply_formatting($event,'underline')">
+      <span class="icon icon-text-underline"></span>
+      <span class="icon-label">Underl.</span>
+    </button>
+    <button class="btn btn-transparent btn-icon-labeled" v-on:click="apply_formatting($event,'strikeThrough')">
+      <span class="icon icon-text-strike"></span>
+      <span class="icon-label">Strike</span>
+    </button>
+    
+    <!--button class="btn btn-transparent btn-icon-labeled" v-on:click="apply_formatting($event,'insertUnorderedList')">
+      <span class="icon icon-text-list-bullet"></span>
+      <span class="icon-label">Bullets</span>
+    </button-->
+  </div>
+</div>

views/partials/tool/textbox.html

+<h4 class="dialog-title">Textframe</h4>
+
+<div id="text-frame">
+  <div class="dialog-section no-p-b">
+    <label class="label label-sm">Vertical Alignment</label>
+    <div class="btn-group">
+      <button class="btn btn-transparent btn-icon" v-on="click:set_artifact_style_prop('valign','top')" ng-class="{active:selected_artifact.align=='top'}">
+        <span class="icon icon-align-vertical-top"></span>
+      </button>
+      <button class="btn btn-transparent btn-icon" v-on="click:set_artifact_style_prop('valign','middle')" ng-class="{active:selected_artifact.align=='middle'}">
+        <span class="icon icon-align-vertical-middle"></span>
+      </button>
+      <button class="btn btn-transparent btn-icon" v-on="click:set_artifact_style_prop('valign','bottom')" ng-class="{active:selected_artifact.align=='bottom'}">
+        <span class="icon icon-align-vertical-bottom"></span>
+      </button>
+    </div>
+  </div>
+
+  <div class="dialog-section no-p-b no-p-h">
+    <div class="form-group no-m">
+      <label class="label label-sm">Padding</label>
+      <input class="input no-b no-p text-center" spellcheck="false" type="text" pattern="[0-9]" maxlength="64" value="250" v-model="active_style.padding">
+      <button tabindex="-1" class="input-drag btn btn-transparent btn-icon" style="cursor: ns-resize;" v-sd-fader="true" sd-fader-var-y="active_style.padding" sd-fader-min-y="0" sd-fader-max-y="500" sd-fader-step="1">
+        <span class="icon icon-triangles-vertical"></span>
+      </button>
+      <span class="input-unit">px</span>
+    </div>
+  </div>
+
+
+  <div class="dialog-section">
+    <label class="btn btn-sm btn-round color-indicator" style="background-color:{{active_style.fill_color}};pointer-events:all"><input type="color" v-model="active_style.fill_color" style="display:block;visibility:hidden;position:absolute;"></label>
+  </div>
+
+  <!--div class="dialog-section no-p-b no-p-h">
+    <div class="form-group no-m">
+      <label class="label label-sm">Columns</label>
+      <input class="input no-b no-p text-center" spellcheck="false" type="text" pattern="[0-9]" maxlength="64" value="5">
+
+      <button class="btn-more btn btn-icon btn-transparent"> </button>
+      <button class="btn-less btn btn-icon btn-transparent"> </button>
+    </div>
+  </div-->
+
+  <!--div class="dialog-section no-p-b no-p-h">
+    <div class="form-group no-m">
+      <label class="label label-sm">Gutter</label>
+      <input class="input no-b no-p text-center" spellcheck="false" type="text" pattern="[0-9]" maxlength="64" value="50">
+      <button tabindex="-1" class="input-drag btn btn-transparent btn-icon" style="cursor: ns-resize;">
+        <span class="icon icon-triangles-vertical"></span>
+      </button>
+      <span class="input-unit">px</span>
+    </div>
+  </div-->
+
+  <!-- <div id="padding" class="dialog-section">
+    <label class="label label-sm">Padding</label>
+
+    <div class="padding-icon">
+      
+      <button id="padding-link" class="btn btn-md btn-toggle btn-dark btn-icon" ng-class="{alt:!padding_locked}" ng-click="toggle_padding_locked()">
+        <span class="btn-option">
+          <span class="icon icon-link-closed"></span>
+        </span>
+
+        <span class="btn-option">
+          <span class="icon icon-link-open"></span>
+        </span>
+      </button>
+      
+      <div class="left">
+        <input class="input" spellcheck="false" type="text" v-model="active_style.padding_left" value="0" style="cursor: ew-resize;">
+        <button class="input-drag btn btn-md btn-transparent btn-icon" sd-fader="y-encoder" sd-fader-var-y="active_style.padding_left" sd-fader-min-y="0" sd-fader-max-y="500" sd-fader-step="0.1">
+          <span class="icon icon-triangles-vertical"></span>
+        </button>
+      </div>
+
+      <div class="right">
+        <input class="input" spellcheck="false" type="text" v-model="active_style.padding_right" value="0" style="cursor: ew-resize;">
+        <button class="input-drag btn btn-md btn-transparent btn-icon" sd-fader="y-encoder" sd-fader-var-y="active_style.padding_left" sd-fader-min-y="0" sd-fader-max-y="500" sd-fader-step="0.1">
+          <span class="icon icon-triangles-vertical"></span>
+        </button>
+      </div>
+
+      <div class="top">
+        <input class="input" spellcheck="false" type="text" v-model="active_style.padding_top" value="0" style="cursor: ns-resize;">
+        <button class="input-drag btn btn-md btn-transparent btn-icon" sd-fader="y-encoder" sd-fader-var-y="active_style.padding_top" sd-fader-min-y="0" sd-fader-max-y="500" sd-fader-step="0.1">
+          <span class="icon icon-triangles-vertical"></span>
+        </button>
+      </div>
+
+      <div class="bottom">
+        <input class="input" spellcheck="false" type="text" v-model="active_style.padding_bottom" value="0" style="cursor: ns-resize;">
+        <button class="input-drag btn btn-md btn-transparent btn-icon" sd-fader="y-encoder" sd-fader-var-y="active_style.padding_bottom" sd-fader-min-y="0" sd-fader-max-y="500" sd-fader-step="0.1">
+          <span class="icon icon-triangles-vertical"></span>
+        </button>
+      </div>
+    </div>
+  </div> -->
+
+</div>
\ No newline at end of file

views/partials/tool/toolbar-elements.html

+<div class="toolbar toolbar-elements" v-bind:class="{in:toolbar_artifacts_in,out:!toolbar_artifacts_in}" v-show="!is_active_space_role('viewer') && active_space_loaded" v-bind:style="{left:toolbar_artifacts_x,top:toolbar_artifacts_y}">
+
+  <div class="btn-group dark">
+
+    <!--div id="search-dialog" class="dropdown bottom light center static" v-bind:class="{open:opened_dialog=='search'}">
+      <div class="btn-collapse in">
+        <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='search'}"  v-on:click="open_dialog('search')" >
+          <span class="icon icon-search"></span>
+          <span class="icon-label">[[__("tool_search")]]</span>
+        </button>
+      </div>
+
+      <div class="dialog dialog-search">
+         xinclude "./search.html" 
+      </div>
+    </div-->
+
+    <div class="dropdown bottom light center" v-bind:class="{open:opened_dialog=='shapes'}">
+      <div class="btn-collapse in">
+        <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='shapes'}" v-on:click="open_dialog('shapes')">
+          <span class="icon icon-shapes"></span>
+          <span class="icon-label">[[__("tool_shape")]]</span>
+        </button>
+      </div>
+
+      <div class="dialog">
+        {% include "./shapes.html" %}
+      </div>
+    </div>
+
+    <button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_scribble()">
+      <span class="icon icon-tool-scribble"></span>
+      <span class="icon-label">[[__("tool_scribble")]]</span>
+    </button>
+    
+    <div class="dropdown bottom light center">
+      <div class="btn-collapse in">
+        <button class="btn btn-transparent btn-icon-labeled" v-on:click="handle_insert_image_url()" v-on:touchstart="handle_insert_image_url()">
+          <span class="icon icon-upload"></span>
+          <span class="icon-label" >[[__("tool_upload")]]</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="dropdown bottom light center">
+      <div class="btn-collapse in">
+        <button class="btn btn-transparent btn-icon-labeled" v-on:click=" add_artifact(active_space, 'text', null, $event)">
+          <span class="icon icon-tool-text"></span>
+          <span class="icon-label">[[__("tool_text")]]</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="dropdown bottom light center">
+      <div class="btn-collapse">
+        <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='image'}" v-on:click="open_dialog('image')">
+          <span class="icon icon-picture"></span>
+          <span class="icon-label">[[__("image")]]</span>
+        </button>
+      </div>
+
+      <div class="dialog">
+        {% include "./image.html" %}
+      </div>
+    </div>
+
+    <div class="dropdown bottom light center" v-bind:class="{open:opened_dialog=='zones'}">
+      <div class="btn-collapse in">
+        <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='zones'}" v-on:click="open_dialog('zones')">
+          <span class="icon icon-zone"></span>
+          <span class="icon-label">[[__("tool_zones")]]</span>
+        </button>
+      </div>
+
+      <div class="dialog">
+        {% include "./zones.html" %}
+      </div>
+    </div>
+
+    <div id="mobile-dialog" class="dropdown bottom light center static" v-bind:class="{open:opened_dialog=='mobile'}">
+      <div class="btn-collapse in">
+        <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='mobile'}" v-on:click="open_dialog('mobile')" >
+          <span class="icon icon-device-mobile"></span>
+          <span class="icon-label">[[__("mobile")]]</span>
+        </button>
+      </div>
+
+      <div class="dialog mobile-search">
+        {% include "./pick-mobile.html" %}
+      </div>
+    </div>
+
+    <button class="btn btn-divider" v-show="logged_in"></button>
+
+    <div class="dropdown bottom light center" v-show="logged_in" v-bind:class="{open:opened_dialog=='background'}">
+      <div class="btn-collapse in">
+        <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='background'}" v-on:click="open_dialog('background')">
+          <span class="letter">bg</span>
+          <span class="icon-label">[[__("tool_canvas")]]</span>
+        </button>
+      </div>
+
+      <div class="dialog">
+        {% include "./background.html" %}
+      </div>
+    </div>
+
+
+  </div>
+</div>

views/partials/tool/toolbar-object-options.html

+<div class="toolbar toolbar-object-options" v-show="(active_space && (active_view == 'space' && !is_active_space_role('viewer')))" v-bind:class="in:(selection_metrics.count>0)">
+
+  <div class="btn-group dark">
+    <div class="btn-group">
+      <div class="btn-collapse" v-bind:class="in : opened_dialog == 'delete_artifact'">
+        <button class="btn btn-green btn-icon-labeled hover" v-on="click : delete_selected_artifacts()">
+          <span class="icon icon-check"></span>
+          <span class="icon-label">Okay</span>
+        </button>
+      </div>
+
+      <div class="btn-collapse" v-bind:class="in : opened_dialog == 'delete_artifact' , last : opened_dialog == 'delete_artifact'">
+        <button class="btn btn-red btn-icon-labeled hover" v-on="click : open_dialog('delete_artifact')">
+          <span class="icon icon-cross-3"></span>
+          <span class="icon-label">Cancel</span>
+        </button>
+      </div>
+
+      <div class="btn-collapse" v-bind:class="in : opened_dialog != 'delete_artifact' , first : opened_dialog != 'delete_artifact'">
+        <button class="btn btn-dark btn-icon-labeled hover" v-on="click : open_dialog('delete_artifact')">
+          <span class="icon icon-trash"></span>
+          <span class="icon-label">Delete</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="btn-collapse" v-bind:class="in:selection_metrics.count<2">
+      <button class="btn btn-transparent btn-icon-labeled hover" v-if="" v-on:click=" show_artifact_comments($event)" >
+        <span class="icon icon-messages"></span>
+        <span class="icon-label">Comment</span>
+      </button>
+    </div>
+
+    <button class="btn btn-transparent btn-icon-labeled hover" v-on:click="duplicate_selected_artifacts()">
+      <span class="icon icon-duplicate"></span>
+      <span class="icon-label">Copy</span>
+    </button>
+  </div>
+
+  <div class="btn-group dark">
+    <button class="btn btn-transparent btn-icon-labeled hover" v-on:click="deselect(true)">
+      <span class="icon icon-cross-1"></span>
+      <span class="icon-label">Cancel</span>
+    </button>
+  </div>
+</div>

views/partials/tool/toolbar-object.html

+<div class="toolbar toolbar-properties" v-cloak v-show="active_space_loaded && !is_active_space_role('viewer')" v-bind:class="{in:toolbar_props_in,out:!toolbar_props_in}" v-bind:style="{left:toolbar_props_x,top:toolbar_props_y}" v-if="active_space_loaded">
+
+  <div class="btn-group dark">
+    <div class="dropdown topleft light"
+    v-bind:class="{open : opened_dialog.match('color') ,
+    'option-1':opened_dialog=='color-fill' ,
+    'option-2':opened_dialog=='color-stroke' ,
+    'option-3':opened_dialog=='color-text',
+    'options-3':selection_metrics.contains_text}">
+
+      <label
+        class="dropdown-toggle btn btn-icon btn-transparent no-r-r"
+        v-on:click="open_dialog('color-fill')"
+        v-bind:class="{open:opened_dialog=='color-fill'}">
+        <span class="icon icon-tool-fill icon-sm"></span>
+        <span class="jewel" v-bind:style="{'background-color':active_style.fill_color}"></span>
+      </label>
+      <label
+        class="dropdown-toggle btn btn-icon btn-transparent no-r"
+        v-bind:class="{open:opened_dialog=='color-stroke'}"
+        v-on:click="open_dialog('color-stroke')">
+        <span class="icon icon-tool-stroke icon-sm"></span>
+        <span class="jewel jewel-stroke" v-bind:style="{'border-color':active_style.stroke_color}"></span>
+      </label>
+      <label
+         class="dropdown-toggle btn btn-icon btn-transparent no-r-l"
+         v-on:click="open_dialog('color-text')"
+         v-bind:class="{open:opened_dialog=='color-text'}">
+        <span class="icon icon-tool-text icon-sm"></span>
+        <span class="jewel" v-bind:style="{'border-color':active_style.text_color}">{{active_style.font_size}}</span>
+      </label>
+      <div class="dialog">
+        {% include "./color.html" %}
+      </div>
+    </div>
+  </div>
+
+  <div class="btn-group dark">
+
+    <!--     <button class="btn btn-transparent btn-icon-labeled">
+             <span class="icon icon-tool-eyedrop"></span>
+             <span class="icon-label">Eyedrop</span>
+    </button>
+
+    <button class="btn btn-divider"></button>
+    -->
+    
+    <div class="dropdown top light center" v-bind:class="{open:opened_dialog=='text-styles'}">
+      <div class="btn-collapse in">
+        <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('text-styles')" v-bind:class="{open : opened_dialog=='text-styles'}">
+          <span class="icon icon-text-styles"></span>
+          <span class="icon-label">styles</span>
+        </button>
+      </div>
+
+      <div class="dialog">
+        {% include "./text-styles.html" %}
+      </div>
+    </div>
+    
+    <div class="dropdown top light center" v-bind:class="{open:opened_dialog=='filter'}">
+      <div class="btn-collapse" v-bind:class="{in:selection_metrics.contains_images}">
+      <!-- <div class="btn-collapse" v-bind:class="in:selection_metrics.count>0"> -->
+        <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('filter')"  v-bind:class="{open : opened_dialog=='filter'}">
+          <span class="icon icon-contrast"></span>
+          <span class="icon-label">[[__("tool_filter")]]</span>
+        </button>
+      </div>
+
+      <div class="dialog">
+        {% include "./filter.html" %}
+      </div>
+    </div>
+
+    <div class="dropdown top light center" v-bind:class="{open:opened_dialog=='type-align'}">
+      <div class="btn-collapse" v-bind:class="{in:selection_metrics.contains_text}">
+        <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('type-align')" v-bind:class="{open : opened_dialog=='type-align'}">
+          <span class="icon icon-text-align-left-alt"></span>
+          <span class="icon-label">[[__("tool_align")]]</span>
+        </button>
+      </div>
+
+      <div class="dialog">
+        {% include "./text-align.html" %}
+      </div>
+    </div>
+
+    <div class="dropdown top light center" v-bind:class="{open:opened_dialog=='layout'}">
+
+      <div class="btn-collapse" v-bind:class="{in:selection_metrics.count>0}">
+        <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('layout')"  v-bind:class="{open : opened_dialog=='layout'}">
+          <span class="icon icon-cluster"></span>
+          <span class="icon-label">[[__("tool_layout")]]</span>
+        </button>
+      </div>
+
+      <div class="dialog">
+        {% include "./layout.html" %}
+      </div>
+    </div>
+    
+    <div class="dropdown top light center" v-bind:class="{open:opened_dialog=='text-settings'}">
+      
+      <div class="btn-collapse in">
+        <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('text-settings')" v-bind:class="{open : opened_dialog=='text-settings'}">
+          <span class="icon icon-text-typeface"></span>
+        <span class="icon-label">Font</span>
+      </button>
+      </div>
+
+      <div class="dialog">
+        {% include "./text-digits.html" %}
+      </div>
+    </div>
+
+    <button class="btn btn-divider"></button>
+
+    <div class="dropdown top light center" v-bind:class="{open:opened_dialog=='object-options'}">
+      <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('object-options')" v-bind:class="{open : opened_dialog=='object-options'}">
+        <span class="icon icon-cogwheel"></span>
+        <span class="icon-label">[[__("more")]]</span>
+      </button>
+
+      <div class="dialog no-min-w">
+        {% include "./object-options.html" %}
+      </div>
+    </div>
+    
+  </div>
+</div>

views/partials/tool/toolbar-social.html

+<div class="toolbar toolbar-social"
+     v-bind:class="{in : active_space_role=='viewer' || (present_mode && active_space.access_mode=='public')}"
+     v-if="social_bar && active_space_loaded">
+  <div class="btn-group dark">
+
+    <div id="share-dialog" class="dropdown bottomleft light center static" v-bind:class="{open:opened_dialog=='share'}">
+      <button class="btn btn-primary btn-icon-labeled" v-on:click="open_dialog('share')">
+        <span class="icon icon-share" style="color:white"></span>
+        <span class="icon-label" style="color:white"> Share </span>
+      </button>
+
+      <div class="dialog">
+          {% include "./share.html" %}
+      </div>
+    </div>
+
+    <div id="share-dialog" class="dropdown bottom light center static" v-bind:class="{open:opened_dialog=='embed'}">
+      <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('embed')">
+        <span class="icon icon-embed"></span>
+        <span class="icon-label"> Embed </span>
+      </button>
+
+      <div class="dialog">
+          {% include "./embed.html" %}
+      </div>
+    </div>
+
+  </div>
+</div>

views/partials/tool/toolbar-text.html

+<div class="toolbar toolbar-text in" v-cloak v-show="(active_space && (active_view == 'space' && !is_active_space_role('viewer') && editing_artifact_id!=null))">
+  <div class="btn-group dark">
+
+    <div class="dropdown bottomleft light center" v-bind:class="{open:opened_dialog=='text-formats'}">
+      <div v-bind:class="{in:selection_metrics.contains_text}">
+        <button class="btn btn-transparent" v-on:click="open_dialog('text-formats')" v-bind:class="open : opened_dialog=='text-formats'">
+          {{active_text_format_name}}
+        </button>
+      </div>
+
+      <div class="dialog">
+          {% include "./text-formats.html" %}
+      </div>
+    </div>
+
+    <button class="btn btn-divider"></button>
+
+    <div class="dropdown bottom light center" v-bind:class="{open:opened_dialog=='text-settings'}">
+      <button class="btn btn-transparent btn-icon-labeled hover" v-on:click="open_dialog('text-settings')" v-bind:class="{open : opened_dialog=='text-settings'}">
+        <span class="text-medium">{{active_style.font_family}}</span>
+        <span class="slash">/</span>
+        <span class="text-medium">{{active_style.font_size}}px</span>
+      </button>
+
+      <div class="dialog">
+        {% include "./text-digits.html" %}
+      </div>
+    </div>
+
+    <button class="btn btn-divider"></button>
+
+    <div class="dropdown bottom light center" v-bind:class="{open:opened_dialog=='text-align'}">
+      <button class="btn btn-transparent btn-icon-labeled hover" v-on:click="open_dialog('text-align')" v-bind:class="{open : opened_dialog=='text-align'}">
+        <span class="icon icon-text-align-left-alt"></span>
+        <span class="icon-label">Align</span>
+      </button>
+
+      <div class="dialog">
+        {% include "./text-align.html" %}
+      </div>
+    </div>
+
+    <div class="dropdown bottom light center" v-bind:class="{open:opened_dialog=='text-styles'}">
+      <button class="btn btn-transparent btn-icon-labeled hover" v-on:click="open_dialog('text-styles')" v-bind:class="{open : opened_dialog=='text-styles'}">
+        <span class="icon icon-text-styles"></span>
+        <span class="icon-label">styles</span>
+      </button>
+
+      <div class="dialog">
+        {% include "./text-styles.html" %}
+      </div>
+    </div>
+  </div>
+
+  <div class="btn-group dark">
+    <button class="btn btn-transparent btn-icon-labeled hover" v-on="click : apply_formatting($event,'insertUnorderedList')">
+      <span class="icon icon-text-list-bullet"></span>
+          <span class="icon-label">Bullets</span>
+    </button>
+    <button class="btn btn-transparent btn-icon-labeled hover" v-on="click : apply_formatting($event,'insertOrderedList')">
+      <span class="icon icon-text-list-numbered"></span>
+          <span class="icon-label">Number</span>
+    </button>
+  </div>
+  
+  <div class="btn-group dark">
+    <button class="btn btn-transparent btn-icon-labeled hover" v-on:click=" toggle_selected_artifact_editing()">
+      <span class="icon icon-cross-1"></span>
+      <span class="icon-label">Cancel</span>
+    </button>
+  </div>
+</div>

views/partials/tool/video.html

+<h4 class="dialog-title">Video</h4>
+
+<div id="video">
+  <div class="dialog-section">
+    <label class="btn btn-xxl btn-transparent btn-icon">
+      <span class="icon icon-video-camera"></span>
+      <input type="file" accept="video/*" multiple v-on="change:handle_video_file_upload($event)" id="video_file_upload">
+    </label>
+    <p>Click to Upload<br/> or drag file(s) anywhere.</p>
+  </div>
+  <div class="dialog-section no-p-b">
+    <input type="text" v-model="video_search_query" class="input input-md input-white input-round text-center no-p no-b no-r input-block" placeholder="Search / Paste URL" v-on="keyup:search_videos(video_search_query) | key enter">
+  </div>
+  <button class="btn btn-transparent btn-block text-center" v-on="click:handle_insert_video_url(video_search_query)">Insert Video</button>
+</div>

views/partials/tool/zones.html

+<h4 class="dialog-title">[[__("tool_zones")]]</h4>
+
+<div id="zones" style="max-height:500px;overflow-y:scroll">
+  <div class="dialog-section">
+    <p v-if="zones.length<2">
+      Turn your Space into a zooming presentation by placing some Zones and switch through them when presenting.
+    </p>
+    
+    <button v-on:click="add_zone()" class="btn btn-sm btn-primary">[[__("add_zone")]]</button>
+  </div>
+
+  <div class="dialog-section no-p" v-for="z in zones | orderBy 'style.order'" style="white-space: nowrap;text-align:left;cursor:pointer" v-on:click="zoom_to_zone(z)">
+    <button class="btn btn-sm btn-transparent">{{{z.description}}}</button>
+    <button v-if="$index==current_zone_idx" v-on:click="sort_zone_up(z)" class="btn btn-sm btn-round btn-transparent btn-icon"><span class="icon icon-triangle-up"></span></button>
+    <button v-if="$index==current_zone_idx" v-on:click="sort_zone_down(z)" class="btn btn-sm btn-round btn-transparent btn-icon"><span class="icon icon-triangle-down"></span></button>
+  </div>
+</div>

views/public/contact.html

+{% extends '../layouts/outer.html' %}
+
+{% block title %}[[ __("contact") ]]{% endblock %}
+
+{% block content %}
+<div class="landing-box">
+
+</div>
+
+{% endblock %}

views/public/privacy.html

+{% extends '../layouts/outer.html' %}
+{% block title %}[[ __("privacy") ]]{% endblock %}
+
+{% block content %}
+
+<div class="landing-box">
+
+</div>
+{% endblock %}

views/public/terms.html

+{% extends '../layouts/outer.html' %}
+
+{% block title %}[[ __("terms") ]]{% endblock %}
+
+{% block content %}
+<div class="landing-box">
+</div>
+{% endblock %}

views/space_list.html

+<html>
+<body>
+
+  <h2>[[ __("folder") ]]: [[space.name]]</h2>
+  <table class="table table-striped" >
+  <tr>
+    <th>[[__("created")]]</th>
+    <th>[[__("name")]]</th>
+    <th>[[__("link")]]</th>
+  </tr>
+  {% for s in subspaces %}
+    <tr>
+      <td>[[ s.created_at | date('d.m.Y H:i') ]]</td>
+      <td>[[ s.name ]]</td>
+      <td>[[ s.ae_link ]]</td>
+    </tr>
+  {% endfor %}
+  </table>
+</body>
+</html>