spacedeck-open/views/partials/tool/background.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>