status_popover.vue 1.74 KB
Newer Older
1 2 3 4 5 6 7
<template>
  <v-popover
    popover-class="status-popover"
    placement="top-start"
    :popper-options="popperOptions"
    @show="enter()"
  >
Tae Hoon's avatar
Tae Hoon committed
8
    <template slot="popover">
9
      <Status
Tae Hoon's avatar
Tae Hoon committed
10
        v-if="status"
11
        :is-preview="true"
Tae Hoon's avatar
Tae Hoon committed
12
        :statusoid="status"
13 14 15 16 17 18 19 20
        :compact="true"
      />
      <div
        v-else
        class="status-preview-loading"
      >
        <i class="icon-spin4 animate-spin" />
      </div>
Tae Hoon's avatar
Tae Hoon committed
21
    </template>
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

    <slot />
  </v-popover>
</template>

<script src="./status_popover.js" ></script>

<style lang="scss">
@import '../../_variables.scss';

.tooltip.popover.status-popover {
  font-size: 1rem;
  min-width: 15em;
  max-width: 95%;
  margin-left: 0.5em;

  .popover-inner {
    border-color: $fallback--border;
    border-color: var(--border, $fallback--border);
    border-style: solid;
    border-width: 1px;
    border-radius: $fallback--tooltipRadius;
    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
    box-shadow: var(--popupShadow);
  }

  .popover-arrow::before {
    position: absolute;
    content: '';
    left: -7px;
    border: solid 7px transparent;
    z-index: -1;
  }

  &[x-placement^="bottom-start"] .popover-arrow::before {
    top: -2px;
    border-top-width: 0;
    border-bottom-color: $fallback--border;
    border-bottom-color: var(--border, $fallback--border);
  }

  &[x-placement^="top-start"] .popover-arrow::before {
    bottom: -2px;
    border-bottom-width: 0;
    border-top-color: $fallback--border;
    border-top-color: var(--border, $fallback--border);
  }

  .status-el.status-el {
    border: none;
  }

  .status-preview-loading {
    padding: 1em;
    text-align: center;

    i {
      font-size: 2em;
    }
  }
}

</style>