vue-guacamole-client/src/components/GuacOptionsDrawer.vue

<!--The fly in options drawer for a guacamole connection-->
<!--Enables the end user to adjust scaling and to inject content on the remote clipboard-->

<template>
  <div id="options-drawer-wrapper">
    <div class="btn btn-xs btn-default" id='toggle-options-drawer' @click="toggleOptionsDrawer"> Options</div>

    <div class="options-drawer" :class="{open: showNav, closed: !showNav}">

      <div class="content">

        <div v-if="viewState=='fullscreen'" >
          <br>
          <div>
            <div class="btn btn-sm btn-default exit-fullscreen pull-right" @click="$emit('exitFullscreen')"><span class="glyphicon glyphicon-resize-small"/></div>

            <h5 style="display:inline"> Exit Fullscreen </h5>
          </div>

          <hr>

        </div>

        <h4> Connection Status</h4>
        <div>Tunnel State: {{ options.tunnelState }}</div>
        <div>Client State: {{ options.clientState }}</div>

        <hr>

        <div class="form-group">
          <label> Clipboard</label>
          <textarea id='clipboard-area' class="form-control" rows="5" v-model="options.clipboard" />
          <div class="btn btn-default" @click="$emit('setClipboard')">Set Clipboard</div>
        </div>

        <hr>

        <div v-if='control' class="form-group">
          <label> Display Resolution</label>
          <select @change='resolutionChange' class='form-control' v-model="displayResolution">
            <option v-for="resolution in resolutions" v-bind:value="resolution">
              {{ resolution}}
            </option>
          </select>

          <br>
          <label v-if="!options.autoScale">
            Scale
            <input type="range" min="0.01" max="3" step='0.01' value="1" class="slider" v-model="options.scale">
          </label>

        </div>

        <!--<hr>-->
        <!--<div class="form-group">-->
          <!--<label> Disconnect </label>-->
          <!--<div class="btn btn-default" @click="$emit('disconnect')">Disconnect</div>-->
        <!--</div>-->

      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Dragged from 'v-dragged'

  Vue.use(Dragged)

  export default {
    name: 'OptionsDrawer',
    props: ['options', 'viewState', 'client', 'resolution', 'control'],
    data(){
      return{
        uploadedFiles: [],
        displayResolution: this.resolution || '1920x1080',
        resolutions: ['1920x1080', '1600x900', '1440x900', '1366x768', '1280x800', '1024x768']
      }
    },
    methods: {

      resolutionChange (data) {
        this.$emit('resolutionChange', this.displayResolution)
      },

      onDragged (event) {
        // Don't drag move element on mousedown and mouseup
        if (event.first || event.last) return false
        event.el.style.top = Math.max(event.clientY, 30) + 'px'
      },

      toggleOptionsDrawer () {
        Vue.set(this.options, 'showOptionsDrawer', !this.options.showOptionsDrawer)
      }
    },
    computed: {

      showNav () {
        return this.options.showOptionsDrawer
      }
    }
  }
</script>

<style scoped>

  #clipboard-area{
    width: 100%;
    rows: 5;
    wrap: soft;
  }

  #options-drawer-wrapper{
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 9;
  }

  .guacamoleClient.thumbnail #options-drawer-wrapper{
    display: none;
  }

  hr{
    border-color: grey;
  }

  .options-drawer .content{
    margin-left: 20px;
    margin-right: 20px;
  }

  .options-drawer.closed .content{
    opacity: 0;
    transition: opacity 0.25s linear ;

  }

  .options-drawer.open .content{
    opacity: 1;
    transition: opacity 0.25s linear 0.25s;
  }

  .options-drawer{
    text-align: left;
    height: 100%;
    background-color: #e8e8e8;
    overflow-x: hidden;
  }

  .options-drawer.open {
    width: 250px;
    transition: width 0.25s linear;
  }

  .options-drawer.closed {
    width: 0px;
    transition: opacity 0.25s linear;
    transition: width 0.25s linear 0.25s;
  }

  .exit-fullscreen{
    padding: 1px 5px;
    font-size: 12px;
  }

  #toggle-options-drawer{
    height: 20px;
    border-radius: 3px;
    position: absolute;
    left: 0px;
    top: 400px;
    padding: 1px 5px;
    font-size: 12px;

    /* Safari */
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: 0% 100%;
  }
</style>