skillbox/client/src/components/content-forms/ContentBlockElementChooserWidget.vue

<template>
  <div
    :class="{'content-block-element-chooser-widget--no-assignment': hideAssignment}"
    class="content-block-element-chooser-widget">
    <div
      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--link"
      data-cy="choose-link-widget"
      @click="$emit('change-type', index, 'link_block')">
      <link-icon class="content-block-element-chooser-widget__link-icon"/>
      <div class="content-block-element-chooser-widget__link-title">Link</div>
    </div>
    <div
      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--video"
      data-cy="choose-video-widget"
      @click="$emit('change-type', index, 'video_block')">
      <video-icon class="content-block-element-chooser-widget__link-icon"/>
      <div class="content-block-element-chooser-widget__link-title">Video</div>
    </div>
    <div
      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--image"
      data-cy="choose-image-widget"
      @click="$emit('change-type', index, 'image_url_block')">
      <image-icon class="content-block-element-chooser-widget__link-icon"/>
      <div class="content-block-element-chooser-widget__link-title">Bild</div>
    </div>
    <div
      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--text"
      data-cy="choose-text-widget"
      @click="$emit('change-type', index, 'text_block')">
      <text-icon class="content-block-element-chooser-widget__link-icon"/>
      <div class="content-block-element-chooser-widget__link-title">Text</div>
    </div>
    <div
      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--assignment"
      data-cy="choose-assignment-widget"
      v-if="!hideAssignment"
      @click="$emit('change-type', index, 'assignment')">
      <speech-bubble-icon class="content-block-element-chooser-widget__link-icon"/>
      <div class="content-block-element-chooser-widget__link-title">Aufgabe&nbsp;& Ergebnis</div>
    </div>
    <div
      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--document"
      data-cy="choose-document-widget"
      @click="$emit('change-type', index, 'document_block')">
      <document-icon class="content-block-element-chooser-widget__link-icon"/>
      <div class="content-block-element-chooser-widget__link-title">Dokument</div>
    </div>
  </div>
</template>

<script>
  import LinkIcon from '@/components/icons/LinkIcon';
  import VideoIcon from '@/components/icons/VideoIcon';
  import ImageIcon from '@/components/icons/ImageIcon';
  import TextIcon from '@/components/icons/TextIcon';
  import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
  import DocumentIcon from '@/components/icons/DocumentIcon';

  export default {
    props: {
      element: {},
      index: {},
      hideAssignment: {
        type: Boolean,
        default: false
      }
    },

    components: {
      LinkIcon,
      VideoIcon,
      ImageIcon,
      TextIcon,
      SpeechBubbleIcon,
      DocumentIcon
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_functions.scss";

  .content-block-element-chooser-widget {
    display: -ms-grid;
    @supports (display: grid) {
      display: grid;
    }
    grid-template-columns: repeat(6, 1fr);
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 0px;
    font-family: $sans-serif-font-family;
    text-align: center;
    border: 2px solid $color-silver-dark;
    padding: 30px 5px;
    border-radius: 12px;
    margin-top: 20px;
    position: relative;
    margin-bottom: 20px;

    /*IE10+*/
    & > :nth-child(1) {
      -ms-grid-column: 1;
    }

    & > :nth-child(2) {
      -ms-grid-column: 2;
    }

    & > :nth-child(3) {
      -ms-grid-column: 3;
    }

    & > :nth-child(4) {
      -ms-grid-column: 4;
    }

    & > :nth-child(5) {
      -ms-grid-column: 5;
    }

    & > :nth-child(6) {
      -ms-grid-column: 6;
    }

    &--no-assignment {
      grid-template-columns: repeat(5, 1fr);
      -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    &::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      border: 2px solid $color-silver-dark;
      border-bottom: 0;
      border-right: 0;
      background-color: white;
      top: -12px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
    }

    &__link {
      padding: 0 20px;
      cursor: pointer;
    }

    &__link-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 15px;
    }

    &__link-text {
      font-size: toRem(13px);
    }

  }
</style>