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

Gallery 'discarded' mark updated.

parent 95e9fe48

src/components/image-dialog/Gallery.vue

+38 −23
Original line number Diff line number Diff line
@@ -5,14 +5,19 @@ 
      :key="imageName"

      class="image-container"

    >

      <delete-icon

        class="gallery-icon"

        v-if="$store.getters.flagImageDiscardedByUser(cameraID, imageName)"

      />

      <div>

        <check-icon

        class="gallery-icon approved-icon"

          class="approved-icon"

          v-if="$store.getters.flagImageApprovedByUser(cameraID, imageName)"

        />

        <svg

          viewBox="0 0 40 30"

          class="discarded-overlay"

          v-if="$store.getters.flagImageDiscardedByUser(cameraID, imageName)"

        >

          <line x1="5" y1="5" x2="35" y2="25" />

          <line x1="35" y1="5" x2="5" y2="25" />

        </svg>

        <img

          :src="image"

          :class="{
@@ -20,22 +25,20 @@ 
            'discarded-image': chartData[imageName].discardedByUser,

            image

          }"

        width="90%"

          @click="onClick(imageName)"

        />

      </div>

      {{ imageName }}

    </div>

  </div>

</template>



<script>

import DeleteIcon from 'icons/Delete'

import CheckIcon from 'icons/Check'



export default {

  name: 'Gallery',

  components: {

    DeleteIcon,

    CheckIcon

  },

  data() {
@@ -110,6 +113,7 @@ export default { 
}



.image {

  width: 90%;

  border-radius: 5px;

}
@@ -119,11 +123,9 @@ export default { 


.selectedImage {

  border: 3px solid var(--color-accent-2);

  // width: 127px;

  // height: 94px;

}



.gallery-icon {

.approved-icon {

  position: absolute;

  right: 10px;

  bottom: 25px;
@@ -132,4 +134,17 @@ export default { 
.approved-icon svg {

  fill: var(--color-accent-1);

}



.discarded-overlay {

  position: absolute;

  left: 5%;

  top: 0px;

  width: 90%;

  opacity: 0.3;

}

.discarded-overlay * {

  stroke: var(--color-accent-2);

  stroke-width: 6;

  stroke-linecap: round;

}

</style>