bramw_baserow/web-frontend/modules/builder/pages/tmpPageBuilder.vue

<template>
  <div>
    <!--
    This is a temporary page that just holds the static html code. It can later be used
    to copy parts out off when building the real thing. When we don't need it anymore,
    we should delete it. Note that when this page component is deleted, we must also
    delete `builder/components/TemporaryPreview.vue`.
    -->
    <header class="layout__col-2-1 header header--space-between">
      <ul class="header__filter">
        <li class="header__filter-item">
          <div>
            <a class="header__filter-link"
              ><i class="header__filter-icon fas fa-stream"></i>
              <span class="header__filter-name">Elements</span></a
            >
          </div>
        </li>
        <li class="header__filter-item">
          <div>
            <a class="header__filter-link"
              ><i class="header__filter-icon fas fa-table"></i>
              <span class="header__filter-name">Data</span></a
            >
          </div>
        </li>
        <li class="header__filter-item">
          <div>
            <a class="header__filter-link"
              ><i class="header__filter-icon fas fa-square-root-alt"></i>
              <span class="header__filter-name">Variables</span></a
            >
          </div>
        </li>
        <li class="header__filter-item">
          <div>
            <a class="header__filter-link"
              ><i class="header__filter-icon fas fa-cogs"></i>
              <span class="header__filter-name">Page settings</span></a
            >
          </div>
        </li>
      </ul>
      <ul class="header__filter">
        <li class="header__filter-item header__filter-item--no-margin-left">
          <div>
            <a
              class="header__filter-link"
              :class="{ 'active active--primary': device === 'desktop' }"
              @click="setDevice('desktop')"
              ><i class="header__filter-icon fas fa-laptop"></i
            ></a>
          </div>
        </li>
        <li class="header__filter-item">
          <div>
            <a
              class="header__filter-link"
              :class="{ 'active active--primary': device == 'tablet' }"
              @click="setDevice('tablet')"
              ><i class="header__filter-icon fas fa-tablet"></i
            ></a>
          </div>
        </li>
        <li class="header__filter-item">
          <div>
            <a
              class="header__filter-link"
              :class="{ 'active active--primary': device == 'smartphone' }"
              @click="setDevice('smartphone')"
              ><i class="header__filter-icon fas fa-mobile"></i
            ></a>
          </div>
        </li>
      </ul>
      <ul class="header__filter">
        <li class="header__filter-item">
          <div>
            <a class="header__filter-link">
              <span class="header__filter-name">Preview</span></a
            >
          </div>
        </li>
        <li class="header__filter-item header__filter-item--right">
          <div>
            <a class="header__filter-link"
              ><i class="header__filter-icon fas fa-upload"></i>
              <span class="header__filter-name">Publish</span></a
            >
          </div>
        </li>
      </ul>
    </header>
    <div class="layout__col-2-2 content">
      <div class="page-builder">
        <div class="page-builder__preview-wrapper">
          <div
            ref="preview"
            class="page-builder__preview"
            :class="{
              'page-builder__preview--tablet': device == 'tablet',
              'page-builder__preview--smartphone': device == 'smartphone',
            }"
          >
            <div ref="previewScaled" class="page-builder__preview-scaled">
              <TemporaryPreview>
                <div
                  v-for="(i, index) in new Array(3)"
                  :key="index"
                  class="page-builder__preview-element"
                  :class="{
                    'page-builder__preview-element--active':
                      selectedElementIndex === index,
                  }"
                  @click="selectedElementIndex = index"
                >
                  <a
                    v-if="selectedElementIndex + 1 !== index"
                    href="#"
                    class="page-builder__preview-add page-builder__preview-element-add page-builder__preview-element-add-first"
                  >
                    <i class="fas fa-plus"></i>
                  </a>
                  <a
                    v-if="selectedElementIndex - 1 !== index"
                    href="#"
                    class="page-builder__preview-add page-builder__preview-element-add page-builder__preview-element-add-last"
                  >
                    <i class="fas fa-plus"></i>
                  </a>
                  <div
                    class="page-builder__preview-menu page-builder__preview-element-menu"
                  >
                    <a href="#" class="page-builder__preview-menu-item">
                      <i class="fas fa-copy"></i>
                      <div class="page-builder__preview-menu-item-description">
                        Copy
                      </div>
                    </a>
                    <a href="#" class="page-builder__preview-menu-item">
                      <i class="fas fa-arrow-up"></i>
                      <div class="page-builder__preview-menu-item-description">
                        Move up
                      </div>
                    </a>
                    <a href="#" class="page-builder__preview-menu-item">
                      <i class="fas fa-arrow-down"></i>
                      <div class="page-builder__preview-menu-item-description">
                        Move down
                      </div>
                    </a>
                    <a href="#" class="page-builder__preview-menu-item">
                      <i class="fas fa-trash"></i>
                      <div class="page-builder__preview-menu-item-description">
                        Delete
                      </div>
                    </a>
                  </div>
                  <p style="font-size: 20px; line-height: 180%; margin: 0">
                    1Are your projects, ideas or business processes unorganized
                    or unclear? With Baserow you decide how you want to
                    structure everything. Whether you’re managing customers,
                    products or airplanes. If you know how a spreadsheet works,
                    you know how Baserow works.
                  </p>
                </div>
              </TemporaryPreview>
            </div>
          </div>
        </div>
        <div class="page-builder__sidebar">
          <ul class="page-builder__sidebar-tabs">
            <li class="page-builder__sidebar-tab">
              <a href="#" class="page-builder__sidebar-tab-link">General</a>
            </li>
            <li class="page-builder__sidebar-tab">
              <a href="#" class="page-builder__sidebar-tab-link">Style</a>
            </li>
            <li class="page-builder__sidebar-tab">
              <a
                href="#"
                class="page-builder__sidebar-tab-link page-builder__sidebar-tab-link--active"
                >Visibility</a
              >
            </li>
            <li class="page-builder__sidebar-tab">
              <a href="#" class="page-builder__sidebar-tab-link">Events</a>
            </li>
          </ul>
          <div class="page-builder__sidebar-content">
            content
            <br />
            content
            <br />
            content
            <br />
            content
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ResizeObserver from 'resize-observer-polyfill'

import TemporaryPreview from '@baserow/modules/builder/components/TemporaryPreview'

export default {
  name: 'Page',
  components: { TemporaryPreview },
  layout: 'app',
  data() {
    return {
      device: 'desktop', // desktop, tablet or smartphone
      selectedElementIndex: 1,
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(() => {
      this.resized()
    })
    this.resizeObserver.observe(this.$el)
    this.$nextTick(() => {
      this.resized()
    })
  },
  beforeDestroy() {
    this.resizeObserver.unobserve(this.$el)
  },
  methods: {
    setDevice(value) {
      this.device = value
      this.$nextTick(() => {
        this.resized()
      })
    },
    resized() {
      // The widths are the minimum width the preview must have. If the preview dom
      // element becomes smaller than the target, it will be scaled down so that the
      // actual width remains the same, and it will preview the correct device.
      const minimumWidths = {
        desktop: 1100,
        tablet: 768,
        smartphone: 420,
      }
      const preview = this.$refs.preview
      const previewScaled = this.$refs.previewScaled

      const currentWidth = preview.clientWidth
      const currentHeight = preview.clientHeight
      const targetWidth = minimumWidths[this.device]
      let scale = 1
      let horizontal = 0
      let vertical = 0

      if (currentWidth < targetWidth) {
        scale = Math.round((currentWidth / targetWidth) * 100) / 100
        horizontal = (currentWidth - currentWidth * scale) / 2 / scale
        vertical = (currentHeight - currentHeight * scale) / 2 / scale
      }

      previewScaled.style.transform = `scale(${scale})`
      previewScaled.style.transformOrigin = `0 0`
      previewScaled.style.width = `${horizontal * 2 + currentWidth}px`
      previewScaled.style.height = `${vertical * 2 + currentHeight}px`
    },
  },
}
</script>