Commit aaaa6815 authored by Matěj Lang's avatar Matěj Lang
Browse files

Tooltip boxes in ImageDialog.

parent b26f0d52

src/App.vue

+1 −0
Original line number Diff line number Diff line
@@ -22,6 +22,7 @@ export default {} 
  --color-accent-2: #fe4a49;

  --color-background: #fff;

  --color-label-background: #ddd;

  --color-tooltip-background: #aaa;

  --color-icon: #333130;



  --color-manually-edited: #00a864;

src/components/image-dialog/ImageDialog.vue

+73 −4
Original line number Diff line number Diff line
@@ -89,6 +89,13 @@ 


            <div style="grid-area:time-shift-title;">

              Time shift

              <div class="tooltip">

                <help-circle-outline-icon class="tooltip-icon" />

                <span class="tooltip-text" style="top: -33px;"

                  >By changing time and date of this image, you shift the time

                  of the whole camera.</span

                >

              </div>

            </div>

            <TimeShift

              :cameraID="cameraID"
@@ -98,7 +105,16 @@ 
          </div>



          <div class="image-controls card">

            <div style="grid-area:approve-title;">Approve image</div>

            <div style="grid-area:approve-title;">

              Approve image

              <div class="tooltip">

                <help-circle-outline-icon class="tooltip-icon" title="" />

                <span class="tooltip-text" style="top: -24px;"

                  >Image is approved automatically every time you edit the

                  image.</span

                >

              </div>

            </div>

            <checkbox-marked-outline-icon

              class="icon"

              style="grid-area:approve-button;"
@@ -112,7 +128,15 @@ 
              v-else

            />



            <div style="grid-area:discard-title;">Discard image</div>

            <div style="grid-area:discard-title;">

              Discard image

              <div class="tooltip">

                <help-circle-outline-icon class="tooltip-icon" />

                <span class="tooltip-text card" style="top: -15px;"

                  >Discarding the image doesn't delete it.</span

                >

              </div>

            </div>

            <checkbox-marked-outline-icon

              class="icon"

              style="grid-area:discard-button;"
@@ -174,6 +198,7 @@ import DeleteIcon from 'icons/Delete' 
import UndoIcon from 'icons/Undo'

import CheckboxMarkedOutlineIcon from 'icons/CheckboxMarkedOutline'

import CheckboxBlankOutlineIcon from 'icons/CheckboxBlankOutline'

import HelpCircleOutlineIcon from 'icons/HelpCircleOutline'



export default {

  name: 'ImageDialog',
@@ -190,7 +215,8 @@ export default { 
    UndoIcon,

    DeleteIcon,

    CheckboxMarkedOutlineIcon,

    CheckboxBlankOutlineIcon

    CheckboxBlankOutlineIcon,

    HelpCircleOutlineIcon

  },

  data() {

    return {
@@ -204,7 +230,10 @@ export default { 
      removeStick: {

        id: 0,

        name: ''

      }

      },

      timeShiftTooltip: false,

      approveTooltip: false,

      discardTooltip: false

    }

  },

  computed: {
@@ -567,6 +596,46 @@ export default { 
  align-self: center;

}



.tooltip-icon svg {

  width: 15px;

  height: 12px;

}



.tooltip {

  position: relative;

  display: inline-block;

}



.tooltip .tooltip-text {

  visibility: hidden;

  width: 180px;

  background-color: var(--color-tooltip-background);

  text-align: center;

  border-radius: 6px;

  padding: 5px 0;

  position: absolute;

  z-index: 1;

  left: 150%;

  opacity: 0;

  transition: opacity 0.3s;

}



.tooltip .tooltip-text::after {

  content: '';

  position: absolute;

  top: 50%;

  right: 100%;

  margin-top: -5px;

  border-width: 5px;

  border-style: solid;

  border-color: transparent var(--color-tooltip-background) transparent

    transparent;

}

.tooltip:hover .tooltip-text {

  visibility: visible;

  opacity: 1;

}



.info {

  grid-area: info;

}