spacedeck-open/views/partials/tool/background.html
2017-04-07 01:29:05 +02:00

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.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>