WebDev/spacedeck-open
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

initial commit.

Browse Source
This commit is contained in:
mntmn
2017-04-07 01:29:05 +02:00
commit 7ff2926578
258 changed files with 83743 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
views/partials/tool/audio.html Normal file
View File

@@ -0,0 +1,16 @@
<h4 class="dialog-title">audio</h4>
<div id="audio">
<div class="dialog-section">
<label class="btn btn-xxl btn-transparent btn-icon">
<span class="icon icon-music-note"></span>
<input type="file" accept="audio/*" multiple v-on="change:handle_audio_file_upload($event)" id="audio_file_upload">
</label>
<p>Click to Upload<br/> or drag file(s) here</p>
</div>
<div class="dialog-section no-p-b">
<input type="text" v-model="audio_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_audio(audio_search_query) | key enter">
</div>
<button class="btn btn-transparent btn-block text-center" v-on="click:handle_insert_audio_url(audio_search_query)">Insert Audio</button>
</div>

112
views/partials/tool/background.html Normal file
View File

@@ -0,0 +1,112 @@
<div class="dialog-tabs-wrapper">
<div class="dialog-tabs">
<div class="dialog-tab" v-bind:class="{open:background_mode=='image'}" v-on:click="background_mode='image'"><span>[[__("background_image_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:background_mode=='color'}" v-on:click="background_mode='color'"><span>[[__("background_color_caption")]]</span></div>
</div>
</div>
<div id="background" class="relative">
<div id="colors" class="relative" v-show="background_mode!='image'">
<div class="color-picker" v-show="color_mode=='picker'">
<div class="color" id="background-color-picker" v-bind:style="{'background-color': 'hsl(' +color_picker_hue/255*360 + ', 100%, 50%)'}"
v-sd-fader="true"
sd-fader-var-x="color_picker_saturation"
sd-fader-var-y="color_picker_value"
sd-fader-max-x="255"
sd-fader-max-y="255">
<div class="fader-constraint mask" style="pointer-events:none" ></div>
<button class="fader-selector" style="pointer-events:none"></button>
</div>
<div class="color-hue"
v-sd-fader="true"
sd-fader-var-x="color_picker_hue">
<button class="fader-selector" style="pointer-events:none"></button>
</div>
<div class="color-opacity"
v-sd-fader="true"
sd-fader-var-x="color_picker_opacity">
<div class="fit"></div>
<button class="fader-selector" style="pointer-events:none"></button>
</div>
<div class="dialog-section no-p" id="color-rgba">
<div class="input-row">
<div>
<label class="color-hsva-hue">H</label>
<input class="input input-md input-nude text-center" v-model="color_picker_hue" spellcheck="false" maxlength="3" type="number">
</div>
<div>
<label class="color-hsva-saturation">S</label>
<input class="input input-md input-nude text-center" v-model="color_picker_saturation" spellcheck="false" maxlength="3" type="number">
</div>
<div>
<label class="color-hsva-brightness">V</label>
<input class="input input-md input-nude text-center" v-model="color_picker_value" spellcheck="false" maxlength="3" type="number">
</div>
<div>
<label class="color-hsva-alpha">A</label>
<input class="input input-md input-nude text-center" v-model="color_picker_opacity" spellcheck="false" maxlength="3" type="number">
</div>
</div>
</div>
</div>
<div class="color-palette" v-show="color_mode=='palette'">
<div class="adapt overflow-y-scroll">
<button class="btn btn-round btn-darken"
v-on:click="apply_swatch_color(s)"
v-for="s in swatches"
v-bind:style="{'background-color': s.hex}">
<span class="icon"></span>
</button>
</div>
</div>
</div>
<!--div class="dialog-section" v-show="background_mode=='color'">
<div class="tab-switch round options-2" v-bind:class="{'option-2':color_mode=='picker'}">
<div class="options">
<span class="option" v-on:click="activate_color_mode('palette')">[[__("palette")]]</span>
<span class="option" v-on:click="activate_color_mode('picker')">
<span>[[__("picker")]]</span>
</span>
</div>
<span class="option-highlight"></span>
</div>
</div-->
<div class="" v-show="background_mode=='image'" v-if="active_space">
<div class="background-image" v-bind:style="{height: '233px', 'background-image':'url('+active_space.advanced.background_uri+')', 'margin': '6px', 'border-radius': '3px'}" v-if="active_space.advanced.background_uri && !space_background_uploading">
</div>
<div class="progress state-processing" v-if="space_background_uploading">
<div class="spinner"></div>
</div>
<div class="dialog-section no-b adapt" v-if="!active_space.advanced.background_uri && !space_background_uploading" v-on:touchstart="handle_touch_select_background_image()">
<label class="btn btn-xxl btn-transparent btn-icon">
<span class="icon icon-picture-upload"></span>
<input id="background-uploader" type="file" accept="image/*" v-on:change="handle_section_background_upload($event)">
</label>
<p>[[__("upload_background_caption")]]</p>
</div>
<div class="dialog-section no-p no-flex" v-if="active_space.advanced.background_uri">
<div class="btn-cluster">
<label class="btn btn-transparent btn-block text-center" v-if="active_space.advanced.background_uri" v-on:touchstart="handle_touch_select_background_image()">
<input id="background-uploader" type="file" accept="image/*" v-on:chang="handle_section_background_upload($event)">
<span class="icon icon-picture-upload"></span>
<!-- Upload -->
</label>
<button class="btn btn-transparent text-center" v-on:click="remove_section_background()" >
<span class="icon icon-trash"></span>
<!-- Remove -->
</button>
</div>
</div>
</div>
</div>

28
views/partials/tool/canvas.html Normal file
View File

@@ -0,0 +1,28 @@
<h4 class="dialog-title">Padding</h4>
<div id="canvas">
<div class="dialog-section no-p-b no-p-h">
<div class="input-couple">
<div>
<div class="form-group no-m">
<label class="label label-sm text-right">Horizontal</label>
<input class="input no-b no-p text-right" spellcheck="false" type="text" value="0" pattern="[0-9]" maxlength="6" v-model="active_version.advanced.padding_horiz">
<button tabindex="-1" class="input-drag btn btn-transparent btn-icon" v-sd-fader="true" sd-fader-var-y="active_version.advanced.padding_horiz" sd-fader-min-y="0" sd-fader-max-y="1000" sd-fader-step="1">
<span class="icon icon-triangles-vertical"></span>
</button>
<!-- <span class="input-unit">px</span> -->
</div>
</div>
<div>
<div class="form-group no-m">
<label class="label label-sm text-left">Vertical</label>
<input class="input no-b no-p text-left" spellcheck="false" type="text" value="0" pattern="[0-9]" maxlength="6" ng-model="active_version.advanced.height">
<button class="input-drag btn btn-transparent btn-icon absolute-bottom-right" sd-fader="y-encoder" sd-fader-var-y="active_version.advanced.height" sd-fader-min-y="100" sd-fader-max-y="20000" sd-fader-step="10">
<span class="icon icon-triangles-vertical"></span>
</button>
<!-- <span class="input-unit">px</span> -->
</div>
</div>
</div>
</div>
</div>

152
views/partials/tool/color.html Normal file
View File

@@ -0,0 +1,152 @@
<div id="colors" class="relative">
<div class="color-picker" v-bind:class="{invis : color_mode=='palette'}">
<div class="color" id="fg-color-picker" v-bind:style="{'background-color': 'hsl(' + color_picker_hue/255*360 + ', 100%, 50%)'}"
v-sd-fader="true"
sd-fader-var-x="color_picker_saturation"
sd-fader-var-y="color_picker_value"
sd-fader-max-x="255"
sd-fader-max-y="255">
<div class="fader-constraint mask" style="pointer-events:none" ></div>
<button class="fader-selector" style="pointer-events:none"></button>
</div>
<div class="color-hue"
v-sd-fader="true"
sd-fader-var-x="color_picker_hue">
<button class="fader-selector" style="pointer-events:none"></button>
</div>
<div class="color-opacity"
v-sd-fader="true"
sd-fader-var-x="color_picker_opacity">
<div class="fit"></div>
<button class="fader-selector" style="pointer-events:none"></button>
</div>
<div class="dialog-section no-p" id="color-rgba">
<div class="input-row">
<div>
<label class="color-hsva-hue">H</label>
<input class="input input-md input-nude text-center" v-model="color_picker_hue" spellcheck="false" maxlength="3" type="number">
</div>
<div>
<label class="color-hsva-saturation">S</label>
<input class="input input-md input-nude text-center" v-model="color_picker_saturation" spellcheck="false" maxlength="3" type="number">
</div>
<div>
<label class="color-hsva-brightness">V</label>
<input class="input input-md input-nude text-center" v-model="color_picker_value" spellcheck="false" maxlength="3" type="number">
</div>
<div>
<label class="color-hsva-alpha">A</label>
<input class="input input-md input-nude text-center" v-model="color_picker_opacity" spellcheck="false" maxlength="3" type="number">
</div>
</div>
</div>
<!-- <div class="dialog-section no-p" id="color-hex">
<button id="add-remove-color" class="btn btn-toggle btn-transparent btn-icon" >
<span class="btn-option">
<span class="icon icon-circle-check"></span>
</span>
<span class="btn-option" >
<span class="icon icon-trash"></span>
</span>
</button>
<div id="color-hash">
<label class="hash">#</label>
<input class="input" v-model="color_picker_rgb" spellcheck="false" maxlength="6" type="text">
</div>
</div> -->
</div>
<div class="color-palette r-10" v-bind:class="{invis:color_mode!='palette'}">
<div class="adapt overflow-y-scroll">
<button class="btn btn-round btn-darken"
v-on:click="apply_swatch_color(s)"
v-for="s in swatches"
v-bind:style="{'background-color': s.hex}">
<span class="icon" v-bind:class="{'icon-cross-0':s.hex=='rgba(0,0,0,0)'}"></span>
</button>
</div>
</div>
</div>
<!--div class="dialog-section no-b" style="margin-top:-10px">
<div class="tab-switch round options-2" v-bind:class="{'option-2':color_mode=='picker'}">
<div class="options">
<span class="option" v-on:click="activate_color_mode('palette')">[[__("palette")]]</span>
<span class="option" v-on:click="activate_color_mode('picker')">
<span>[[__("picker")]]</span>
</span>
</div>
<span class="option-highlight"></span>
</div>
</div-->
<!--div class="dialog-section no-p-h no-p-b" v-show="opened_dialog=='color-fill'">
<div class="form-group no-m">
<label class="label label-sm">Padding</label>
<input class="input no-b no-p text-center text-large" spellcheck="false" type="number" 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 no-p-h no-p-b" v-show="opened_dialog=='color-stroke'">
<div class="input-row">
<div class="form-group no-m">
<label class="label label-sm">Stroke</label>
<input class="input no-b no-p text-center text-large" spellcheck="false" type="number" v-model="active_style.stroke">
<button tabindex="-1" class="input-drag btn btn-transparent btn-icon" v-sd-fader="true" sd-fader-var-y="active_style.stroke" sd-fader-min-y="0" sd-fader-max-y="100" sd-fader-step="1">
<span class="icon icon-triangles-vertical"></span>
</button>
<span class="input-unit">px</span>
</div>
<div class="form-group no-m">
<label class="label label-sm">Border Radius</label>
<input class="input no-b no-p text-center text-large" spellcheck="false" type="number" v-model="active_style.border_radius">
<button tabindex="-1" class="input-drag btn btn-transparent btn-icon" v-sd-fader="true" sd-fader-var-y="active_style.border_radius" 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>
<div class="dialog-section no-p-b no-p-h" v-show="opened_dialog=='color-text'">
<div class="input-row">
<div class="form-group no-m">
<label class="label label-sm text-center">[[__("font_size")]]</label>
<input class="input no-b no-p text-center text-large" spellcheck="false" type="text" pattern="[0-9]" maxlength="64" v-model="active_style.font_size">
<!--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.font_size" sd-fader-min-y="8" sd-fader-max-y="400" sd-fader-sens="0.2">
<span class="icon icon-triangles-vertical"></span>
</button-->
<span class="input-unit">px</span>
</div>
<div class="form-group no-m">
<span class="font-size-swatches" v-show="opened_dialog=='color-text'">
<button class="btn btn-sm" v-on:click="apply_font_size(64)" style="font-size:32px">Big</button>
<button class="btn btn-sm" v-on:click="apply_font_size(32)" style="font-size:24px">Medium</button>
<button class="btn btn-sm" v-on:click="apply_font_size(18)" style="font-size:14px">Small</button>
</span>
</div>
<!--div class="form-group no-m">
<label class="label label-sm text-center">[[__("line_height")]]</label>
<input disabled class="input no-b no-p text-center text-large" spellcheck="false" type="text" pattern="[0-9\.]" maxlength="64" v-model="active_style.line_height">
<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.line_height" sd-fader-min-y="0.5" sd-fader-max-y="4" sd-fader-step="0.1">
<span class="icon icon-triangles-vertical"></span>
</button>
<span class="input-unit">em</span>
</div-->
</div>
</div>

30
views/partials/tool/crop.html Normal file
View File

@@ -0,0 +1,30 @@
<h4 class="dialog-title">Crop<br/><br/>(Not yet implemented)</h4>
<div id="crop">
<div class="dialog-section">
<div class="form-group">
<label class="label label-range">Size</label>
<div class="range-wrapper">
<output for="crop" value="50">50</output>
<input type="range" name="crop" min="0" max="100" value="50">
</div>
</div>
</div>
<div id="fit" class="dialog-section">
<div class="form-group">
<label class="label label-sm">Proportions</label>
<div class="btn-group center">
<button class="btn btn-transparent btn-icon">
<span class="icon number">Fit</span>
</button>
<button class="btn btn-transparent btn-icon">
<span class="icon number">Fill</span>
</button>
<button class="btn btn-transparent btn-icon">
<span class="icon number">1:1</span>
</button>
</div>
</div>
</div>
</div>

15
views/partials/tool/embed.html Normal file
View File

@@ -0,0 +1,15 @@
<h4 class="dialog-title">Embed Space</h4>
<div id="embed">
<div class="dialog-section">
<p>
Copy and paste this HTML code into your blog or website:
</p>
</div>
<hr>
<div class="dialog-section">
<div class="form-group">
<textarea class="input input-md no-b input-block no-p" style="line-height: 140% !important; height: 200px; font-size: 13px !important; color: #666; font-family: courier" v-model="space_embed_html"></textarea>
</div>
</div>
</div>

73
views/partials/tool/filter.html Normal file
View File

@@ -0,0 +1,73 @@
<h4 class="dialog-title">Filters</h4>
<div id="filter">
<div class="dialog-section">
<span class="icon icon-lightbulb"></span>
<div class="form-group">
<label class="label label-range">Brightness</label>
<div class="range-wrapper">
<output for="brightness">{{active_style.brightness}}</output>
<input type="range" name="brightness" min="0" max="200" value="100" v-model="active_style.brightness">
</div>
</div>
</div>
<div class="dialog-section">
<span class="icon icon-contrast"></span>
<div class="form-group">
<label class="label label-range">Contrast</label>
<div class="range-wrapper">
<output for="contrast">{{active_style.contrast}}</output>
<input type="range" name="contrast" min="0" max="200" value="100" v-model="active_style.contrast">
</div>
</div>
</div>
<div class="dialog-section">
<span class="icon icon-certificate"></span>
<div class="form-group">
<label class="label label-range">Saturation</label>
<div class="range-wrapper">
<output for="saturation">{{active_style.saturation}}</output>
<input type="range" name="saturation" min="0" max="200" value="100" v-model="active_style.saturation">
</div>
</div>
</div>
<div class="dialog-section">
<span class="icon icon-circle-subtract"></span>
<div class="form-group">
<label class="label label-range">Opacity</label>
<div class="range-wrapper">
<output for="opacity">{{active_style.opacity}}</output>
<input type="range" name="opacity" min="0" max="100" value="100" v-model="active_style.opacity">
</div>
</div>
</div>
<div class="dialog-section">
<span class="icon icon-leave"></span>
<div class="form-group">
<label class="label label-range">Hue</label>
<div class="range-wrapper">
<output for="hue">{{active_style.hue}}</output>
<input type="range" name="hue" min="0" max="360" value="0" v-model="active_style.hue">
</div>
</div>
</div>
<div class="dialog-section">
<span class="icon icon-tint"></span>
<div class="form-group">
<label class="label label-range">Blur</label>
<div class="range-wrapper">
<output for="blur">{{active_style.blur}}</output>
<input type="range" name="blur" min="0" max="100" value="0" v-model="active_style.blur">
</div>
</div>
</div>
</div>
<div class="dialog-section no-p">
<button class="btn btn-transparent btn-block text-center" v-on:click="reset_artifact_filters()">Reset</button>
</div>

29
views/partials/tool/grid.html Normal file
View File

@@ -0,0 +1,29 @@
<div id="grid">
<div class="dialog-section no-p-b no-p-h">
<div class="form-group no-m">
<label class="label label-sm">Grid</label>
<input class="input no-b no-p text-center" spellcheck="false" type="text" pattern="[0-9]" maxlength="64" ng-model="grid.spacing" value="50">
<button tabindex="-1" class="input-drag btn btn-transparent btn-icon" sd-fader="y-encoder" sd-fader-var-y="grid.spacing" sd-fader-min-y="4" 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 no-p-b no-p-h">
<div class="form-group no-m">
<label class="label label-sm">Subdivision</label>
<input class="input no-b no-p text-center" spellcheck="false" type="text" pattern="[0-9]" maxlength="64" ng-model="grid.subdivisions" value="4">
<button class="btn-more btn btn-icon btn-transparent" ng-click="increase_grid_subdivisions()"> </button>
<button class="btn-less btn btn-icon btn-transparent" ng-click="decrease_grid_subdivisions()"> </button>
</div>
</div>
<div class="dialog-section">
<button class="btn btn-md btn-block btn-darker" ng-click="open_dialog('canvas')">
Close
</button>
</div>
</div>

15
views/partials/tool/image.html Normal file
View File

@@ -0,0 +1,15 @@
<h4 class="dialog-title">Image</h4>
<div id="image">
<div class="dialog-section">
<label class="btn btn-xxl btn-transparent btn-icon">
<span class="icon icon-picture-upload"></span>
<input type="file" accept="*/*" multiple v-on:change="handle_image_file_upload($event)" id="image_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="image_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.enter="search_images(image_search_query)">
</div>
<button class="btn btn-transparent btn-block text-center" v-on:click="handle_insert_image_url(image_search_query)">Insert Image</button>
</div>

65
views/partials/tool/layout.html Normal file
View File

@@ -0,0 +1,65 @@
<div id="layout" class="relative">
<div class="dialog-section no-p-b">
<div class="btn-group">
<button class="btn btn-transparent btn-icon" v-on:click="layout_stack_top()">
<span class="icon icon-stack-3d-top"></span>
</button>
<button class="btn btn-transparent btn-icon" v-on:click="layout_stack_bottom()">
<span class="icon icon-stack-3d-bottom"></span>
</button>
<button class="left btn btn-transparent btn-icon" v-on:click="layout_align_left()">
<span class="icon icon-align-left"></span>
</button>
<button class="right btn btn-transparent btn-icon" v-on:click="layout_align_right()">
<span class="icon icon-align-right"></span>
</button>
<button class="top btn btn-transparent btn-icon" v-on:click="layout_align_top()">
<span class="icon icon-align-top"></span>
</button>
<button class="bottom btn btn-transparent btn-icon" v-on:click="layout_align_bottom()">
<span class="icon icon-align-bottom"></span>
</button>
</div>
<div class="btn-group">
<button class="btn btn-transparent btn-icon" v-on:click="layout_align_center()">
<span class="icon icon-align-center-horizontal"></span>
</button>
<button class="btn btn-transparent btn-icon" v-on:click="layout_align_middle()">
<span class="icon icon-align-center-vertical"></span>
</button>
<button class="btn btn-transparent btn-icon" v-on:click="layout_distribute_horizontal()">
<span class="icon icon-distribute-horizontal"></span>
</button>
<button class="btn btn-transparent btn-icon" v-on:click="layout_distribute_vertical()">
<span class="icon icon-distribute-vertical"></span>
</button>
<button class="btn btn-transparent btn-icon" v-on:click="layout_distribute_horizontal_spacing()">
<span class="icon icon-spacing-horizontal"></span>
</button>
<button class="btn btn-transparent btn-icon" v-on:click="layout_distribute_vertical_spacing()">
<span class="icon icon-spacing-vertical"></span>
</button>
<button class="btn btn-transparent btn-icon" v-on:click="layout_auto()">
<span class="icon icon-cluster"></span>
</button>
</div>
<!--div class="dialog-section no-p-b no-p-h" v-if="selection_metrics.count>1">
<label class="label label-sm">Match Size</label>
<div class="btn-group">
<button class="btn btn-transparent btn-icon" v-on:click="layout_match_size_vert()">
<span class="icon icon-size-vertical"></span>
</button>
<button class="btn btn-transparent btn-icon" v-on:click="layout_match_size_both()">
<span class="icon icon-size-both"></span>
</button>
<button class="btn btn-transparent btn-icon" v-on:click="layout_match_size_horiz()">
<span class="icon icon-size-horizontal"></span>
</button>
</div>
</div-->
</div>
</div>

13
views/partials/tool/link.html Normal file
View File

@@ -0,0 +1,13 @@
<div class="dialog-section no-p">
<div class="form-group">
<div class="input-group">
<input class="input no-b w-3 b-r m-r-60" type="url" placeholder="Url"
v-on="keydown:create_link_on_selected_artifacts | key enter"
v-model="insert_link_url">
</div>
<button class="btn btn-transparent btn-icon absolute-bottom-right" v-show="selection_metrics.has_link" v-on="click:remove_link_from_selected_artifacts()">
<span class="icon icon-link-open"></span>
</button>
</div>
</div>

88
views/partials/tool/metrics.html Normal file
View File

@@ -0,0 +1,88 @@
<h4 class="dialog-title">Metrics</h4>
<div id="metrics">
<!-- <button class="btn btn-toggle btn-transparent btn-icon" ng-class="{alt:artifact_aspect_ratio=='locked'}">
<span class="btn-option" ng-click="set_artifact_aspect_ratio($event,'locked')" >
<span class="icon icon-lock-open"></span>
</span>
<span class="btn-option" ng-click="set_artifact_aspect_ratio($event,'open')" >
<span class="icon icon-lock-closed"></span>
</span>
</button>
<button class="btn btn-transparent btn-icon">
<span class="icon number">1:1</span>
</button> -->
<div class="dialog-section no-p-b no-p-h">
<div class="input-couple">
<div>
<div class="form-group no-m">
<label class="label label-sm text-right">Width</label>
<input class="input no-b no-p text-right" spellcheck="false" type="text" value="0" pattern="[0-9]" maxlength="6" ng-model="selection_metrics.w">
<button tabindex="-1" class="input-drag btn btn-transparent btn-icon" sd-fader="y-encoder" sd-fader-var-y="selection_metrics.w" sd-fader-min-y="0" sd-fader-max-y="100000" sd-fader-step="0.1">
<span class="icon icon-triangles-vertical"></span>
</button>
<!-- <span class="input-unit">px</span> -->
<span class="times"> × </span>
</div>
</div>
<div>
<div class="form-group no-m">
<label class="label label-sm text-left">Height</label>
<input class="input no-b no-p text-left" spellcheck="false" type="text" value="0" pattern="[0-9]" maxlength="6" ng-model="selection_metrics.h">
<button class="input-drag btn btn-transparent btn-icon absolute-bottom-right" sd-fader="y-encoder" sd-fader-var-y="selection_metrics.h" sd-fader-min-y="0" sd-fader-max-y="100000" sd-fader-step="0.1">
<span class="icon icon-triangles-vertical"></span>
</button>
<!-- <span class="input-unit">px</span> -->
</div>
</div>
</div>
</div>
<div class="dialog-section no-p-b no-p-h">
<div class="input-couple">
<div>
<div class="form-group no-m">
<label class="label label-sm text-right">X Axis</label>
<input class="input no-b no-p text-right" spellcheck="false" type="text" value="0" pattern="[0-9]" maxlength="6" ng-model="selection_metrics.x1">
<button tabindex="-1" class="input-drag btn btn-transparent btn-icon" sd-fader="y-encoder" sd-fader-var-y="selection_metrics.x1" sd-fader-min-y="0" sd-fader-max-y="100000" sd-fader-step="0.1">
<span class="icon icon-triangles-vertical"></span>
</button>
<!-- <span class="input-unit">px</span> -->
</div>
</div>
<div>
<div class="form-group no-m">
<label class="label label-sm text-left">Y Axis</label>
<input class="input no-b no-p text-left" spellcheck="false" type="text" value="0" pattern="[0-9]" maxlength="6" ng-model="selection_metrics.y1">
<button class="input-drag btn btn-transparent btn-icon absolute-bottom-right" sd-fader="y-encoder" sd-fader-var-y="selection_metrics.y1" sd-fader-min-y="0" sd-fader-max-y="100000" sd-fader-step="0.1">
<span class="icon icon-triangles-vertical"></span>
</button>
<!-- <span class="input-unit">px</span> -->
</div>
</div>
</div>
</div>
<!--div id="transform-origin" class="dialog-section">
<label class="label">Transform Origin</label>
<div class="transform-origin-icon">
<label ng-class="{checked:transform_origin=='absolute-top-left'}" ng-click="set_transform_origin($event,'absolute-top-left')" class="radio only absolute-top-left"> <input type="radio" value="absolute-top-left"> </label>
<label ng-class="{checked:transform_origin=='top-center'}" ng-click="set_transform_origin($event,'top-center')" class="radio only top-center"> <input type="radio" value="top-center"> </label>
<label ng-class="{checked:transform_origin=='absolute-top-right'}" ng-click="set_transform_origin($event,'absolute-top-right')" class="radio only absolute-top-right"> <input type="radio" value="absolute-top-right"> </label>
<label ng-class="{checked:transform_origin=='center-left'}" ng-click="set_transform_origin($event,'center-left')" class="radio only center-left"> <input type="radio" value="center-left"> </label>
<label ng-class="{checked:transform_origin=='center-center'}" ng-click="set_transform_origin($event,'center-center')" class="radio only center-center"> <input type="radio" value="center-center"> </label>
<label ng-class="{checked:transform_origin=='center-right'}" ng-click="set_transform_origin($event,'center-right')" class="radio only center-right"> <input type="radio" value="center-right"> </label>
<label ng-class="{checked:transform_origin=='absolute-bottom-left'}" ng-click="set_transform_origin($event,'absolute-bottom-left')" class="radio only absolute-bottom-left"> <input type="radio" value="absolute-bottom-left"> </label>
<label ng-class="{checked:transform_origin=='bottom-center'}" ng-click="set_transform_origin($event,'bottom-center')" class="radio only bottom-center"> <input type="radio" value="bottom-center"> </label>
<label ng-class="{checked:transform_origin=='absolute-bottom-right'}" ng-click="set_transform_origin($event,'absolute-bottom-right')" class="radio only absolute-bottom-right"> <input type="radio" value="absolute-bottom-right"> </label>
</div>
</div-->
</div>

37
views/partials/tool/object-options.html Normal file
View File

@@ -0,0 +1,37 @@
<div class="dialog-section no-b no-p" v-if="active_space_loaded">
<div class="btn-group">
<button class="btn btn-transparent btn-icon-labeled" v-on:click="delete_selected_artifacts()">
<span class="icon icon-trash"></span>
<span class="icon-label">[[__("delete")]]</span>
</button>
<button class="btn btn-divider"></button>
<button class="btn btn-transparent btn-icon-labeled" v-on:click="toggle_lock_of_selected_artifacts()" v-if="active_space_role=='admin'">
<span class="icon icon-lock-closed"></span>
<span class="icon-label">[[__("lock")]]</span>
</button>
<button class="btn btn-transparent btn-icon-labeled" v-on:click="toggle_lock_of_selected_artifacts()" v-if="active_space_role=='admin'">
<span class="icon icon-lock-open"></span>
<span class="icon-label">[[__("unlock")]]</span>
</button>
<button class="btn btn-transparent btn-icon-labeled" v-on:click="duplicate_selected_artifacts()">
<span class="icon icon-duplicate"></span>
<span class="icon-label">[[__("copy")]]</span>
</button>
<button class="btn btn-transparent btn-icon-labeled" v-on:click="create_link_on_selected_artifacts()">
<span class="icon icon-link"></span>
<span class="icon-label">[[__("link")]]</span>
</button>
<span v-if="first_selected_artifact">
<button class="btn btn-transparent btn-icon-labeled" v-on:click="download_selected_artifacts()" v-if="selection_metrics.count==1 && first_selected_artifact.payload_uri">
<span class="icon icon-download"></span>
<span class="icon-label">[[__("download")]]</span>
</button>
</span>
</div>
</div>

24
views/partials/tool/object.html Normal file
View File

@@ -0,0 +1,24 @@
<div id="sections">
<h4 class="dialog-title">Selection</h4>
<div class="dialog-section no-p no-b">
<button class="btn btn-transparent btn-block " v-on="click: add_section('grid',-1)">
<span style="margin: 7px" class="icon absolute-left icon-md icon-grid-free"></span>
<span class="icon-label">Grid</span>
</button>
</div>
<div class="dialog-section no-p">
<button class="btn btn-transparent btn-block " v-on="click: add_section('board',-1)">
<span style="margin: 7px" class="icon absolute-left icon-md icon-cluster"></span>
<span class="icon-label">Canvas</span>
</button>
</div>
<div class="dialog-section no-p">
<button class="btn btn-transparent btn-block " v-on="click: add_section('article',-1)">
<span style="margin: 7px" class="icon absolute-left icon-md icon-text-align-left"></span>
<span class="icon-label">Article</span>
</button>
</div>
</div>

48
views/partials/tool/pattern.html Normal file
View File

@@ -0,0 +1,48 @@
<h4 class="dialog-title">Pattern</h4>
<div id="pattern">
<div class="dialog-section">
<label class="file btn btn-md btn-block btn-transparent" style="margin-bottom:2px">
<input type="file" >
Upload Image
</label>
<div class="dropdown dropdown-block" drop-down>
<button type="button" class="btn btn-transparent btn-md btn-block btn-dropdown" data-toggle="dropdown">Repeat X-Axis</button>
<div class="dropdown-menu center" role="menu">
<ul class="select-list medium">
<li><span>Repeat X-Axis</span></li>
<li><span>Repeat Y-Axis</span></li>
<li><span>Repeat Both-Axis</span></li>
<li><span>Don't Repeat</span></li>
</ul>
</div>
</div>
</div>
<div id="background-position" class="dialog-section">
<label class="label">Pattern Position</label>
<div class="position-icon">
<label ng-class="{checked:pattern_position=='absolute-top-left'}" ng-click="set_pattern_position($event,'absolute-top-left')" class="radio only absolute-top-left"> <input type="radio" value="absolute-top-left"> </label>
<label ng-class="{checked:pattern_position=='top-center'}" ng-click="set_pattern_position($event,'top-center')" class="radio only top-center"> <input type="radio" value="top-center"> </label>
<label ng-class="{checked:pattern_position=='absolute-top-right'}" ng-click="set_pattern_position($event,'absolute-top-right')" class="radio only absolute-top-right"> <input type="radio" value="absolute-top-right"> </label>
<label ng-class="{checked:pattern_position=='center-left'}" ng-click="set_pattern_position($event,'center-left')" class="radio only center-left"> <input type="radio" value="center-left"> </label>
<label ng-class="{checked:pattern_position=='center-center'}" ng-click="set_pattern_position($event,'center-center')" class="radio only center-center"> <input type="radio" value="center-center"> </label>
<label ng-class="{checked:pattern_position=='center-right'}" ng-click="set_pattern_position($event,'center-right')" class="radio only center-right"> <input type="radio" value="center-right"> </label>
<label ng-class="{checked:pattern_position=='absolute-bottom-left'}" ng-click="set_pattern_position($event,'absolute-bottom-left')" class="radio only absolute-bottom-left"> <input type="radio" value="absolute-bottom-left"> </label>
<label ng-class="{checked:pattern_position=='bottom-center'}" ng-click="set_pattern_position($event,'bottom-center')" class="radio only bottom-center"> <input type="radio" value="bottom-center"> </label>
<label ng-class="{checked:pattern_position=='absolute-bottom-right'}" ng-click="set_pattern_position($event,'absolute-bottom-right')" class="radio only absolute-bottom-right"> <input type="radio" value="absolute-bottom-right"> </label>
</div>
</div>
<div class="dialog-section p-20">
<div class="form-group">
<label class="label label-range">Size</label>
<div class="range-wrapper">
<output for="crop" value="50">50</output>
<input type="range" name="crop" min="0" max="100" value="50">
</div>
</div>
</div>
</div>

12
views/partials/tool/pick-mobile.html Normal file
View File

@@ -0,0 +1,12 @@
<div id="pick-mobile" v-if="active_space" class="dialog-section" v-show="opened_dialog=='mobile'">
<h4 class="dialog-title">Mobile Upload</h4>
<img v-if="active_space.edit_hash" v-bind:src="'/api/helper/qrcode/'+ active_space._id" />
<p class="text-center">
Install the Spacedeck App on your phone and scan this QR code to upload photos, sound, video or text.
<p>
<p class="text-center">
Access Code: {{active_space.edit_hash}}
</p>
</div>

70
views/partials/tool/search.html Normal file
View File

@@ -0,0 +1,70 @@
<div id="search" class="relative w-8" style="height:350px">
<ul class="dialog-side-tabs">
<li>
<button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='google'" v-on="click:search_google(generic_search_query)">
<span class="icon icon-social-google"></span>
<span class="icon-label">Google</span>
</button>
</li>
<li>
<button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='youtube'" v-on="click:search_youtube(generic_search_query)">
<span class="icon icon-social-youtube"></span>
<span class="icon-label">Youtube</span>
</button>
</li>
<li>
<button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='tumblr'" v-on="click:search_tumblr(generic_search_query)">
<span class="icon icon-social-tumblr"></span>
<span class="icon-label">Tumblr</span>
</button>
</li>
<li>
<button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='soundcloud'" v-on="click:search_soundcloud(generic_search_query)">
<span class="icon icon-social-soundcloud"></span>
<span class="icon-label">Soundcloud</span>
</button>
</li>
</ul>
<div class="dialog-search-input">
<!-- generic search box placeholder -->
<div class="relative">
<span class="icon icon-zoom absolute-top-left no-events" style="margin-top: -2px;"></span>
<input type="text" v-model="generic_search_query" v-focus class="input input-white input-round input-block no-b p-l-60" placeholder="[[__("search_media_placeholder")]]" v-on="keyup: search_generic(generic_search_query) | key enter">
</div>
<!-- <button type="button" class="btn btn-sm btn-icon btn-round btn-darken absolute-top-right clear-search" style="margin-right: 42px; margin-top: 40px;">
<span class="icon icon-cross-1"></span>
</button> -->
</div>
<div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="search_loading">
<span class="middle">Searching...</span>
</div>
<!-- search results audio -->
<div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="audio_search_results.length">
<div class="search-result search-result-audio relative" v-repeat="r : audio_search_results" v-on="click:create_artifact_via_embed_url(r.permalink_url)">
<iframe frameborder="0" seamless width="100%" v-attr="src:r.embed_url"></iframe>
</div>
</div>
<!-- search results images -->
<div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="image_search_results.length">
<div class="search-result search-result-image" v-repeat="r : image_search_results" v-on="click:handle_insert_image_url(r.link)">
<img v-attr="src:r.thumb"/>
</div>
</div>
<!-- search results video -->
<div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="video_search_results.length">
<div class="search-result search-result-video relative" v-repeat="r : video_search_results" v-on="click:create_artifact_via_embed_url('https://youtube.com/?v='+r.id.videoId)">
<div class="thumbnail" v-style="background-image: 'url(https://img.youtube.com/vi/'+r.id.videoId+'/hqdefault.jpg)'"> </div>
<span>{{r.snippet.title}}</span>
<!-- <span>{{r.snippet.description}}</span> -->
<!-- <span>{{r.snippet.thumbnails.medium.url}}</span> -->
</div>
</div>
</div>

31
views/partials/tool/selection.html Normal file
View File

@@ -0,0 +1,31 @@
<div id="sections">
<h4 class="dialog-title">Selection</h4>
<div class="dialog-section no-p no-b">
<button class="btn btn-transparent btn-block" v-on:click="toggle_selected_artifact_editing()" v-bind:class="active:editing_artifact_id">
<span style="margin: 7px" class="icon absolute-left icon-md icon-pencil"></span>
<span class="icon-label">Edit</span>
</button>
</div>
<div class="dialog-section no-p">
<button class="btn btn-transparent btn-block">
<span style="margin: 7px" class="icon absolute-left icon-md icon-group"></span>
<span class="icon-label">Group</span>
</button>
</div>
<div class="dialog-section no-p">
<button class="btn btn-transparent btn-block" >
<span style="margin: 7px" class="icon absolute-left icon-md icon-duplicate"></span>
<span class="icon-label">Copy</span>
</button>
</div>
<div class="dialog-section no-p">
<button class="btn btn-transparent btn-block" v-on:click="delete_selected_artifacts()">
<span style="margin: 7px" class="icon absolute-left icon-md icon-trash"></span>
<span class="icon-label">Delete</span>
</button>
</div>
</div>

69
views/partials/tool/shapes.html Normal file
View File

@@ -0,0 +1,69 @@
<h4 class="dialog-title">[[__("tool_shape")]]</h4>
<div id="shapes">
<div class="dialog-section no-p-h" style="white-space: normal;">
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('ellipse',$event)">
<span class="icon icon-shape-circle"></span>
<span class="icon-label">[[__("tool_circle")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('hexagon',$event)">
<span class="icon icon-shape-hexagon"></span>
<span class="icon-label">[[__("tool_hexagon")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('square',$event)">
<span class="icon icon-shape-square"></span>
<span class="icon-label">[[__("tool_square")]]</span>
</button>
<!--button class="btn btn-icon-labeled btn-transparent rot45" v-on:click="add_shape('diamond',$event)">
<span class="icon icon-shape-square"></span>
<span class="icon-label">[[__("tool_diamond")]]</span>
</button-->
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('speechbubble',$event)">
<span class="icon icon-shape-bubble"></span>
<span class="icon-label">[[__("tool_bubble")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('cloud',$event)">
<span class="icon icon-shape-cloud"></span>
<span class="icon-label">[[__("tool_cloud")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('burst',$event)">
<span class="icon icon-shape-burst"></span>
<span class="icon-label">[[__("tool_burst")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('star',$event)">
<span class="icon icon-shape-star"></span>
<span class="icon-label">[[__("tool_star")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('heart',$event)">
<span class="icon icon-shape-heart"></span>
<span class="icon-label">[[__("tool_heart")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_arrow()">
<span class="icon icon-tool-arrow"></span>
<span class="icon-label">[[__("tool_arrow")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_line()">
<span class="icon icon-tool-line"></span>
<span class="icon-label">[[__("tool_line")]]</span>
</button>
</div>
</div>
<!--
<div class="dialog-section no-p">
<div class="btn-cluster">
<button class="btn btn-transparent text-center"> Upload </button>
<button class="btn btn-transparent text-center" v-on:click="start_drawing_scribble()"> Draw </button>
</div>
</div>
-->

19
views/partials/tool/share.html Normal file
View File

@@ -0,0 +1,19 @@
<!-- <h4 class="dialog-title">Share</h4> -->
<div class="dialog-section no-p">
<a class="btn btn-transparent btn-icon-labeled hover" href="http://www.facebook.com/sharer.php?u={{share_base_url_enc}}{{active_space._id}}">
<span class="icon icon-social-square-facebook"> </span>
<span class="icon-label"> facebook </span>
</a>
<a class="btn btn-transparent btn-icon-labeled hover" target="_blank" href="https://twitter.com/intent/tweet?url={{share_base_url_enc}}{{active_space._id}}">
<span class="icon icon-social-twitter"> </span>
<span class="icon-label"> twitter </span>
</a>
<a class="btn btn-transparent btn-icon-labeled hover email" target="_blank" href="mailto:?subject=Check out my new Space&amp;body={{share_base_url_enc}}{{active_space._id}}">
<span class="icon icon-mail"> </span>
<span class="icon-label"> email </span>
</a>
<hr>
<h4 class="dialog-title">Share via Link</h4>
<span class="input no-b" style="height:auto;padding:15px">{{share_base_url+active_space._id}}</span>
</div>

110
views/partials/tool/size.html Normal file
View File

@@ -0,0 +1,110 @@
<h4 class="dialog-title">Size</h4>
<div>
<div class="dialog-section no-p-b no-p-h">
<div class="btn-group">
<button class="btn btn-transparent btn-icon">
<span class="icon icon-size-vertical"></span>
</button>
<button class="btn btn-transparent btn-icon">
<span class="icon icon-size-both"></span>
</button>
<button class="btn btn-transparent btn-icon">
<span class="icon icon-size-horizontal"></span>
</button>
</div>
</div>
<div class="dialog-section no-p">
<!-- <button class="btn btn-toggle btn-transparent btn-icon" ng-class="{alt:artifact_aspect_ratio=='locked'}">
<span class="btn-option" ng-click="set_artifact_aspect_ratio($event,'locked')" >
<span class="icon icon-lock-open"></span>
</span>
<span class="btn-option" ng-click="set_artifact_aspect_ratio($event,'open')" >
<span class="icon icon-lock-closed"></span>
</span>
</button> -->
<button class="btn btn-transparent btn-icon">
<span class="icon number">1:1</span>
</button>
<button class="btn btn-transparent btn-icon">
<span class="icon number">Auto</span>
</button>
</div>
<div class="dialog-section no-p-b no-p-h">
<div class="input-couple">
<div>
<div class="form-group no-m">
<label class="label label-sm text-right">Width</label>
<input class="input no-b no-p text-right" spellcheck="false" type="text" value="0" pattern="[0-9]" maxlength="6" ng-model="selection_metrics.w">
<button tabindex="-1" class="input-drag btn btn-transparent btn-icon" sd-fader="y-encoder" sd-fader-var-y="selection_metrics.w" sd-fader-min-y="0" sd-fader-max-y="100000" sd-fader-step="0.1">
<span class="icon icon-triangles-vertical"></span>
</button>
<!-- <span class="input-unit">px</span> -->
<span class="times"> × </span>
</div>
</div>
<div>
<div class="form-group no-m">
<label class="label label-sm text-left">Height</label>
<input class="input no-b no-p text-left" spellcheck="false" type="text" value="0" pattern="[0-9]" maxlength="6" ng-model="selection_metrics.h">
<button class="input-drag btn btn-transparent btn-icon absolute-bottom-right" sd-fader="y-encoder" sd-fader-var-y="selection_metrics.h" sd-fader-min-y="0" sd-fader-max-y="100000" sd-fader-step="0.1">
<span class="icon icon-triangles-vertical"></span>
</button>
<!-- <span class="input-unit">px</span> -->
</div>
</div>
</div>
</div>
<div class="dialog-section no-p-b no-p-h hidden">
<div class="input-couple">
<div>
<div class="form-group no-m">
<label class="label label-sm text-right">X Axis</label>
<input class="input no-b no-p text-right" spellcheck="false" type="text" value="0" pattern="[0-9]" maxlength="6" ng-model="selection_metrics.x1">
<button tabindex="-1" class="input-drag btn btn-transparent btn-icon" sd-fader="y-encoder" sd-fader-var-y="selection_metrics.x1" sd-fader-min-y="0" sd-fader-max-y="100000" sd-fader-step="0.1">
<span class="icon icon-triangles-vertical"></span>
</button>
<!-- <span class="input-unit">px</span> -->
</div>
</div>
<div>
<div class="form-group no-m">
<label class="label label-sm text-left">Y Axis</label>
<input class="input no-b no-p text-left" spellcheck="false" type="text" value="0" pattern="[0-9]" maxlength="6" ng-model="selection_metrics.y1">
<button class="input-drag btn btn-transparent btn-icon absolute-bottom-right" sd-fader="y-encoder" sd-fader-var-y="selection_metrics.y1" sd-fader-min-y="0" sd-fader-max-y="100000" sd-fader-step="0.1">
<span class="icon icon-triangles-vertical"></span>
</button>
<!-- <span class="input-unit">px</span> -->
</div>
</div>
</div>
</div>
<!--div id="transform-origin" class="dialog-section">
<label class="label">Transform Origin</label>
<div class="transform-origin-icon">
<label ng-class="{checked:transform_origin=='absolute-top-left'}" ng-click="set_transform_origin($event,'absolute-top-left')" class="radio only absolute-top-left"> <input type="radio" value="absolute-top-left"> </label>
<label ng-class="{checked:transform_origin=='top-center'}" ng-click="set_transform_origin($event,'top-center')" class="radio only top-center"> <input type="radio" value="top-center"> </label>
<label ng-class="{checked:transform_origin=='absolute-top-right'}" ng-click="set_transform_origin($event,'absolute-top-right')" class="radio only absolute-top-right"> <input type="radio" value="absolute-top-right"> </label>
<label ng-class="{checked:transform_origin=='center-left'}" ng-click="set_transform_origin($event,'center-left')" class="radio only center-left"> <input type="radio" value="center-left"> </label>
<label ng-class="{checked:transform_origin=='center-center'}" ng-click="set_transform_origin($event,'center-center')" class="radio only center-center"> <input type="radio" value="center-center"> </label>
<label ng-class="{checked:transform_origin=='center-right'}" ng-click="set_transform_origin($event,'center-right')" class="radio only center-right"> <input type="radio" value="center-right"> </label>
<label ng-class="{checked:transform_origin=='absolute-bottom-left'}" ng-click="set_transform_origin($event,'absolute-bottom-left')" class="radio only absolute-bottom-left"> <input type="radio" value="absolute-bottom-left"> </label>
<label ng-class="{checked:transform_origin=='bottom-center'}" ng-click="set_transform_origin($event,'bottom-center')" class="radio only bottom-center"> <input type="radio" value="bottom-center"> </label>
<label ng-class="{checked:transform_origin=='absolute-bottom-right'}" ng-click="set_transform_origin($event,'absolute-bottom-right')" class="radio only absolute-bottom-right"> <input type="radio" value="absolute-bottom-right"> </label>
</div>
</div-->
</div>

68
views/partials/tool/stroke.html Normal file
View File

@@ -0,0 +1,68 @@
<h4 class="dialog-title">Stroke</h4>
<div id="stroke">
<div class="dialog-section no-p">
<div class="form-group no-m">
<input class="input no-b no-p text-center text-large" spellcheck="false" type="number" v-model="active_style.stroke">
<button tabindex="-1" class="input-drag btn btn-transparent btn-icon" v-sd-fader="true" sd-fader-var-y="active_style.stroke" sd-fader-min-y="0" sd-fader-max-y="100" sd-fader-step="1">
<span class="icon icon-triangles-vertical"></span>
</button>
<span class="input-unit">px</span>
</div>
</div>
<div class="dialog-section no-p-h no-p-b" v-show="selection_metrics.borders_stylable">
<div class="form-group no-m">
<label class="label label-sm">Border Radius</label>
<input class="input no-b no-p text-center" spellcheck="false" type="number" v-model="active_style.border_radius">
<button tabindex="-1" class="input-drag btn btn-transparent btn-icon" v-sd-fader="true" sd-fader-var-y="active_style.border_radius" 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 id="style" class="dialog-section no-p-h no-p-b" v-show="selection_metrics.borders_stylable">
<div class="form-group">
<label class="label label-sm">Border Style</label>
<div class="btn-group center">
<button class="btn btn-transparent btn-icon" v-on="click:set_artifact_style_prop('stroke_style','solid')">
<span class="icon icon-border-solid"></span>
</button>
<button class="btn btn-transparent btn-icon" v-on="click:set_artifact_style_prop('stroke_style','dashed')">
<span class="icon icon-border-dashed"></span>
</button>
<button class="btn btn-transparent btn-icon" v-on="click:set_artifact_style_prop('stroke_style','dotted')">
<span class="icon icon-border-dotted"></span>
</button>
</div>
</div>
</div>
<!-- <div class="dialog-section">
<label class="btn btn-sm btn-round color-indicator" style="background-color:{{active_style.stroke_color}}"><input type="color" v-model="active_style.stroke_color" style="display:block;visibility:hidden;position:absolute;"></label>
</div>
-->
<div class="dialog-section no-p">
<button class="btn btn-transparent btn-block text-center" v-on="click:reset_stroke()">Remove Stroke</button>
</div>
</div>
<!--div id="style" class="dialog-section">
<div class="form-group">
<label class="label label-sm">Arrow Head</label>
<div class="btn-group center">
<button class="btn btn-transparent btn-icon">
<span class="icon icon-chevron-up-4"></span>
</button>
<button class="btn btn-transparent btn-icon">
<span class="icon icon-shape-triangle"></span>
</button>
<button class="btn btn-transparent btn-icon">
<span class="icon icon-moon-new"></span>
</button>
</div>
</div>
</div-->

28
views/partials/tool/text-align.html Normal file
View File

@@ -0,0 +1,28 @@
<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>

25
views/partials/tool/text-columns.html Normal file
View File

@@ -0,0 +1,25 @@
<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>

13
views/partials/tool/text-digits.html Normal file
View File

@@ -0,0 +1,13 @@
<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>

20
views/partials/tool/text-formats.html Normal file
View File

@@ -0,0 +1,20 @@
<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>
-->

29
views/partials/tool/text-styles.html Normal file
View File

@@ -0,0 +1,29 @@
<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>

101
views/partials/tool/textbox.html Normal file
View File

@@ -0,0 +1,101 @@
<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>

110
views/partials/tool/toolbar-elements.html Normal file
View File

@@ -0,0 +1,110 @@
<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>

46
views/partials/tool/toolbar-object-options.html Normal file
View File

@@ -0,0 +1,46 @@
<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>

130
views/partials/tool/toolbar-object.html Normal file
View File

@@ -0,0 +1,130 @@
<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>

29
views/partials/tool/toolbar-social.html Normal file
View File

@@ -0,0 +1,29 @@
<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>

72
views/partials/tool/toolbar-text.html Normal file
View File

@@ -0,0 +1,72 @@
<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>

15
views/partials/tool/video.html Normal file
View File

@@ -0,0 +1,15 @@
<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>

17
views/partials/tool/zones.html Normal file
View File

@@ -0,0 +1,17 @@
<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>