spacedeck-open/views/partials/tool/zones.html

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