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 iconoir-selection"></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 iconoir-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 iconoir-sigma-function"></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 iconoir-settings"></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 iconoir-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 baserow-icon-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 iconoir-smartphone-device"></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 iconoir-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="iconoir-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="iconoir-plus"></i>
                  </a>
                  <div
                    class="page-builder__preview-menu page-builder__preview-element-menu"
                  >
                    <a href="#" class="page-builder__preview-menu-item">
                      <i class="iconoir-copy"></i>
                      <div class="page-builder__preview-menu-item-description">
                        Copy
                      </div>
                    </a>
                    <a href="#" class="page-builder__preview-menu-item">
                      <i class="iconoir-nav-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="iconoir-nav-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="iconoir-bin"></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>