113 lines
5.0 KiB
HTML
113 lines
5.0 KiB
HTML
|
|
<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.background_uri+')', 'margin': '6px', 'border-radius': '3px'}" v-if="active_space.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.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.background_uri">
|
|
<div class="btn-cluster">
|
|
<label class="btn btn-transparent btn-block text-center" v-if="active_space.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>
|