WIP MNT design/UX cleanup
This commit is contained in:
mntmn
@@ -126,19 +126,11 @@
|
||||
<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">
|
||||
<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="30" sd-fader-max-y="200" sd-fader-sens="5">
|
||||
<span class="icon icon-triangles-vertical"></span>
|
||||
</button-->
|
||||
</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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div id="layout" class="relative">
|
||||
<div class="dialog-section no-p-b">
|
||||
<div class="btn-group">
|
||||
<div class="">
|
||||
<button class="btn btn-transparent btn-icon" v-on:click="layout_stack_top()">
|
||||
<span class="icon icon-stack-3d-top"></span>
|
||||
</button>
|
||||
@@ -20,7 +20,7 @@
|
||||
<span class="icon icon-align-bottom"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="">
|
||||
<button class="btn btn-transparent btn-icon" v-on:click="layout_align_center()">
|
||||
<span class="icon icon-align-center-horizontal"></span>
|
||||
</button>
|
||||
|
||||
@@ -24,6 +24,6 @@
|
||||
<!--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-->
|
||||
</button--!>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,24 @@
|
||||
<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="toolbar toolbar-elements" v-bind:class="{in:toolbar_artifacts_in,out:!toolbar_artifacts_in}" v-show="!is_active_space_role('viewer') && active_space_loaded">
|
||||
|
||||
<div class="btn-group light vertical">
|
||||
|
||||
<a class="btn btn-icon btn-transparent"
|
||||
title="[[__("home")]]" href="/spaces"
|
||||
v-if="(!active_space.parent_space_id && !guest_nickname)">
|
||||
<span class="icon icon-folder"></span>
|
||||
</a>
|
||||
|
||||
<a class="btn btn-icon btn-transparent"
|
||||
title="Parent Folder"
|
||||
href="/folders/{{active_space.parent_space_id}}"
|
||||
v-if="(active_space.parent_space_id && !guest_nickname)">
|
||||
|
||||
<span class="icon icon-folder"></span>
|
||||
</a>
|
||||
|
||||
<div class="btn-group dark">
|
||||
<button class="btn btn-divider"></button>
|
||||
|
||||
<!--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="dropdown top left light" 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>
|
||||
@@ -28,11 +31,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_scribble()">
|
||||
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_scribble()" v-bind:class="{active:active_tool=='scribble'}">
|
||||
<span class="icon icon-tool-scribble"></span>
|
||||
<span class="icon-label">[[__("tool_scribble")]]</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_arrow()" v-bind:class="{active:active_tool=='arrow'}">
|
||||
<span class="icon icon-tool-arrow"></span>
|
||||
<span class="icon-label">[[__("tool_arrow")]]</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()">
|
||||
@@ -44,14 +52,14 @@
|
||||
|
||||
<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)">
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click="active_tool='note'" v-bind:class="{active:active_tool=='note'}">
|
||||
<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="dropdown top left light">
|
||||
<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>
|
||||
@@ -64,7 +72,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown bottom light center" v-bind:class="{open:opened_dialog=='zones'}">
|
||||
<div class="dropdown top left light" 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>
|
||||
@@ -79,7 +87,7 @@
|
||||
|
||||
<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="dropdown top left 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>
|
||||
@@ -92,6 +100,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-transparent btn-icon-labeled" v-on:click="activate_access()">
|
||||
<span class="icon icon-share"></span>
|
||||
<span class="icon-label">[[ __('share') ]]</span>
|
||||
</button>
|
||||
|
||||
<!--
|
||||
<li v-on:click="edit_space_title()" v-if="logged_in">
|
||||
<span>
|
||||
<span class="icon icon-sm icon-tag"></span>
|
||||
<span>[[ __('rename') ]]</span>
|
||||
</span>
|
||||
</li>
|
||||
-->
|
||||
<button class="btn btn-transparent btn-icon-labeled" title="Start Presentation (others follow what you see)" v-on:click="toggle_present_mode()" v-bind:class="{open:present_mode}">
|
||||
<span class="icon icon-presentation"></span>
|
||||
<span class="icon-label">[[ __('present') ]]</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,42 +1,38 @@
|
||||
<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="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-if="active_space_loaded">
|
||||
|
||||
<div class="btn-group dark">
|
||||
<div class="dropdown topleft light"
|
||||
<div class="btn-group light vertical">
|
||||
<div class="dropdown top right 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"
|
||||
<button
|
||||
class="dropdown-toggle btn btn-icon btn-transparent"
|
||||
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"
|
||||
</button><br>
|
||||
<button
|
||||
class="dropdown-toggle btn btn-icon btn-transparent"
|
||||
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"
|
||||
</button><br>
|
||||
<button
|
||||
class="dropdown-toggle btn btn-icon btn-transparent"
|
||||
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>
|
||||
</button>
|
||||
<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>
|
||||
@@ -45,7 +41,7 @@
|
||||
<button class="btn btn-divider"></button>
|
||||
-->
|
||||
|
||||
<div class="dropdown top light center" v-bind:class="{open:opened_dialog=='text-styles'}">
|
||||
<div class="dropdown top light right" 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>
|
||||
@@ -58,21 +54,7 @@
|
||||
</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="dropdown top light right" 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>
|
||||
@@ -85,9 +67,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown top light center" v-bind:class="{open:opened_dialog=='layout'}">
|
||||
<div class="dropdown top light right" v-bind:class="{open:opened_dialog=='layout'}">
|
||||
|
||||
<div class="btn-collapse" v-bind:class="{in:selection_metrics.count>0}">
|
||||
<div class="btn-collapse in">
|
||||
<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>
|
||||
@@ -99,13 +81,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown top light center" v-bind:class="{open:opened_dialog=='text-settings'}">
|
||||
<div class="dropdown top light right" 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>
|
||||
<span class="icon-label">Font</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dialog">
|
||||
@@ -115,7 +97,7 @@
|
||||
|
||||
<button class="btn btn-divider"></button>
|
||||
|
||||
<div class="dropdown top light center" v-bind:class="{open:opened_dialog=='object-options'}">
|
||||
<div class="dropdown top light right" 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>
|
||||
|
||||
Reference in New Issue
Block a user