From 3e7ee9e68679a87770188c0c1fb639bd32d016fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Tue, 31 Oct 2023 17:29:51 +0100
Subject: [PATCH] Uprava editoru

---
 src/components/photos/PhotoCarousel.vue       |  80 ------
 src/components/photos/PhotoDetail.vue         | 261 ------------------
 src/components/photos/PhotosEditorList.vue    |   6 +-
 src/composables/photos/editor/crop.js         |  65 ++---
 src/composables/photos/photo.js               |  12 -
 src/pages/profile/flight/FlightDetailPage.vue |   5 -
 src/pages/profile/flight/PhotoEditorPage.vue  | 178 +++++++-----
 7 files changed, 141 insertions(+), 466 deletions(-)
 delete mode 100644 src/components/photos/PhotoCarousel.vue
 delete mode 100644 src/components/photos/PhotoDetail.vue
 delete mode 100644 src/composables/photos/photo.js

diff --git a/src/components/photos/PhotoCarousel.vue b/src/components/photos/PhotoCarousel.vue
deleted file mode 100644
index 78e08e8..0000000
--- a/src/components/photos/PhotoCarousel.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup>
-import PhotoDetail from "components/photos/PhotoDetail.vue";
-import {onMounted, ref, watch} from "vue";
-import {useRoute, useRouter} from "vue-router";
-
-const props = defineProps({
-  photos: {
-    type: Array,
-    required: true
-  },
-  coverPhotoUrl: {
-    type: String,
-    required: false
-  },
-  carouselTitle: {
-    type: String,
-    required: false
-  },
-  defaultTitle: {
-    type: String,
-    required: false
-  }
-})
-
-const $route = useRoute();
-const photoId = parseInt($route.query.photo);
-
-const displayedPhoto = ref(null);
-
-const emits = defineEmits(["open-detail"]);
-
-watch(() => props.photos, (newVal) => {
-  if (newVal.length === 0) return;
-  displayedPhoto.value = props.coverPhotoUrl || newVal[0].url;
-}, {immediate: true});
-
-
-const openDetail = ({photo, idx, allPhotos}) => {
-  emits("open-detail", {photo, idx, allPhotos});
-}
-
-onMounted(() => {
-  const idx = props.photos.findIndex(p => p.id === photoId);
-  if (idx >= 0) {
-    const photo = props.photos[idx];
-    openDetail({photo, allPhotos: props.photos, idx});
-  }
-});
-</script>
-
-<template>
-  <q-carousel
-    v-if="photos.length > 0"
-    animated
-    v-model="displayedPhoto"
-    arrows
-    swipeable
-    height="auto"
-    infinite
-    v-bind="$attrs"
-  >
-    <q-carousel-slide style="padding: 0" v-for="(photo, idx) in photos" :key="photo.url" :name="photo.url">
-      <q-img :src="photo.url">
-        <span class="absolute-top text-right">
-          <q-btn
-            round
-            icon="zoom_in"
-            class="bg-blue-grey-9 text-white q-ma-md all-pointer-events"
-            @click="openDetail({photo, idx, allPhotos: photos})" />
-        </span>
-         <div class="absolute-bottom custom-caption">
-          <div class="text-h5" v-if="carouselTitle"> {{ carouselTitle }} </div>
-          <div class="text-subtitle1" v-if="photos.length > 0">
-            <q-btn rounded @click.prevent="openDetail({photo: photos[0], idx: 0, allPhotos: photos})">{{photos.length}} fotografií</q-btn>
-          </div>
-        </div>
-      </q-img>
-    </q-carousel-slide>
-  </q-carousel>
-</template>
diff --git a/src/components/photos/PhotoDetail.vue b/src/components/photos/PhotoDetail.vue
deleted file mode 100644
index fcecc3b..0000000
--- a/src/components/photos/PhotoDetail.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<script setup>
-import EmbeddedMap from "components/map/EmbeddedMap.vue";
-import {computed, ref, watch} from "vue";
-import {formatDatetime} from "src/composables/datetimeUtils";
-import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'
-import {useQuasar} from "quasar";
-import {useRouter} from "vue-router";
-
-const props = defineProps({
-  photos: {
-    type: Array,
-    required: false,
-    default: () => []
-  },
-  openedIndex: {
-    type: Number,
-    required: false,
-  },
-  modelValue: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  defaultTitle: {
-    type: String,
-    required: false
-  }
-});
-
-const $q = useQuasar();
-const $router = useRouter();
-
-const imageFullscreen = ref(false);
-const isMaximized = computed(() => $q.screen.width <= $q.screen.sizes.sm);
-
-const displayedPhotoIndex = ref(null);
-watch(() => props.openedIndex, (newVal) => {
-  displayedPhotoIndex.value = newVal;
-}, {immediate: true});
-const photo = computed(() => props.photos[displayedPhotoIndex.value]);
-
-const emit = defineEmits(["update:modelValue"])
-const isDetailOpened = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(newVal) {
-    emit("update:modelValue", newVal);
-  }
-});
-
-const nextPhoto = () => {
-  if (imageFullscreen.value) return;
-
-  if (displayedPhotoIndex.value < props.photos.length - 1) {
-    displayedPhotoIndex.value++;
-    scrollToPhoto();
-  }
-}
-
-const prevPhoto = () => {
-  if (imageFullscreen.value) return;
-  if (displayedPhotoIndex.value > 0) {
-    displayedPhotoIndex.value--;
-    scrollToPhoto();
-  }
-}
-
-const openDetail = (idx) => {
-  displayedPhotoIndex.value = idx;
-  scrollToPhoto();
-};
-
-watch(() => displayedPhotoIndex.value, (newVal) => {
-  const photo = props.photos[newVal];
-  $router.replace({query: {photo: photo.id}});
-}, {immediate: true});
-
-const removePhotoFromQueries = () => {
-  $router.replace({query: {photo: undefined}});
-}
-
-const showExtra = ref(false);
-const scrollArea = ref(null);
-const infoWrapper = ref(null);
-const scrollToPhoto = () => {
-  scrollArea.value.setScrollPosition('vertical', 0, 500);
-}
-
-const showExtraInfo = () => {
-  if (showExtra.value) {
-    showExtra.value = false;
-    scrollToPhoto();
-  } else {
-    showExtra.value = true;
-    const scrollAreaHeight = infoWrapper.value.offsetTop;
-    scrollArea.value.setScrollPosition('vertical', scrollAreaHeight, 500);
-  }
-}
-</script>
-
-<template>
-  <q-dialog
-    v-model="isDetailOpened"
-    full-width
-    :maximized="isMaximized"
-    no-route-dismiss
-    @hide="removePhotoFromQueries"
-  >
-    <q-card>
-      <q-scroll-area ref="scrollArea" style="height: 95vh">
-        <q-card-section class="bg-black text-white" v-if="isMaximized">
-          <div class="row">
-            <div class="col">
-              <strong>{{ photo.name || defaultTitle }}</strong>
-            </div>
-            <div class="col-1 text-right">
-              <q-btn round text-color="white" size="sm" icon="close" @click="isDetailOpened = false"/>
-            </div>
-          </div>
-        </q-card-section>
-        <div class="fixed-top-right q-mt-md q-mr-md z-max" v-else>
-          <q-btn round size="sm" icon="close" @click="isDetailOpened = false"/>
-        </div>
-
-        <q-card-section :class="{'q-pa-none': isMaximized}">
-          <div :class="{'relative-position': true, 'image-full-height': imageFullscreen}">
-            <div
-              class="text-center"
-              v-touch-swipe.mouse.right="prevPhoto"
-              v-touch-swipe.mouse.left="nextPhoto"
-              @keyup.left="prevPhoto"
-              @keyup.right="nextPhoto">
-              <inner-image-zoom
-                :move-type="isMaximized ? 'drag' : 'pan'"
-                :zoomScale="0.75"
-                :hide-hint="true"
-                :after-zoom-in="() => imageFullscreen = true"
-                :after-zoom-out="() => imageFullscreen = false"
-                :src="photo.url"
-              />
-            </div>
-
-            <template v-if="!imageFullscreen">
-              <q-btn
-                class="absolute all-pointer-events"
-                round
-                flat
-                icon="info"
-                :text-color="showExtra ? 'primary' : 'white'"
-                style="background: rgba(0, 0, 0, 0.25); bottom: 16px; left: 8px"
-                @click="showExtraInfo"
-              />
-              <q-btn
-                class="absolute all-pointer-events"
-                style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
-                @click="prevPhoto"
-                v-if="displayedPhotoIndex > 0 && !isMaximized"
-                icon="chevron_left"
-                text-color="white"
-                flat
-                rounded
-              />
-              <q-btn
-                class="absolute all-pointer-events"
-                style="background: rgba(0, 0, 0, 0.25); top: 50%; right: 8px;"
-                @click="nextPhoto"
-                v-if="displayedPhotoIndex < photos.length - 1 && !isMaximized"
-                icon-right="chevron_right"
-                text-color="white"
-                flat
-                rounded
-              />
-            </template>
-          </div>
-
-          <div class="row" v-show="!imageFullscreen">
-            <div class="col-3 col-md-1 q-pa-sm" v-for="(thumb, idx) in photos" :key="thumb.thumbnailUrl">
-              <q-img
-                :src="thumb.thumbnailUrl"
-                @click="openDetail(idx)"
-                :class='{"shadow-5": true, "active-thumbnail": idx === displayedPhotoIndex}'
-              />
-            </div>
-          </div>
-
-          <div class="row" ref="infoWrapper">
-            <div class="col-12 q-my-md" v-if="showExtra">
-              <EmbeddedMap
-                v-if="photo.gpsLatitude && photo.gpsLongitude"
-                class="q-mx-sm"
-                :gps-latitude="photo.gpsLatitude"
-                :gps-longitude="photo.gpsLongitude"
-              />
-
-              <strong v-if="photo.name !== '' && !isMaximized">{{ photo.name }}</strong>
-              <p v-if="photo.description !== ''">{{ photo.description }}</p>
-
-              <q-list dense>
-                <q-item v-if="photo.pointOfInterest">
-                  <q-item-section avatar>
-                    <q-avatar icon="marker"></q-avatar>
-                  </q-item-section>
-                  <q-item-section>
-                    {{ photo.pointOfInterest.name }}
-                  </q-item-section>
-                </q-item>
-                <q-item v-if="photo.exposedAt">
-                  <q-item-section avatar>
-                    <q-avatar icon="photo_camera"></q-avatar>
-                  </q-item-section>
-                  <q-item-section>
-                    {{ formatDatetime(photo.exposedAt) }}
-                  </q-item-section>
-                </q-item>
-
-                <q-item v-if="photo.gpsAltitude">
-                  <q-item-section avatar>
-                    <q-avatar icon="height"/>
-                  </q-item-section>
-                  <q-item-section>
-                    Nadmořská výška: {{ photo.gpsAltitude }} m
-                    <br>
-                    <template v-if="photo.terrainElevation">
-                      Výška terénu: {{ photo.terrainElevation }} m
-                      <br>
-                      Výška nad zemí: {{ photo.gpsAltitude - photo.terrainElevation }} m
-                    </template>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </div>
-          </div>
-        </q-card-section>
-      </q-scroll-area>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style>
-.active-thumbnail {
-  outline: solid 2px
-}
-
-.iiz {
-  width: 100%;
-}
-
-.image-full-height .iiz {
-  height: calc(95vh - 65px) !important;
-}
-
-.iiz__img {
-  max-height: 90vh !important;
-  margin: 0 auto;
-}
-
-.iiz__img--hidden {
-  height: 100vh;
-}
-</style>
diff --git a/src/components/photos/PhotosEditorList.vue b/src/components/photos/PhotosEditorList.vue
index 98d2614..4fc1344 100644
--- a/src/components/photos/PhotosEditorList.vue
+++ b/src/components/photos/PhotosEditorList.vue
@@ -111,7 +111,7 @@ const batchOptionsProps = computed(() => ({
 </script>
 
 <template>
-  <div class="row q-mb-lg">
+  <div class="row" style="margin-bottom: 150px">
     <div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
       <q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
         <q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)" style="cursor: pointer">
@@ -143,8 +143,8 @@ const batchOptionsProps = computed(() => ({
       <q-card-actions>
         <q-checkbox v-model="checkAll" label="Vybrat vše"/>
         <q-btn v-bind="batchOptionsProps" icon="info" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
-        <q-btn v-bind="batchOptionsProps" icon="rotate_left" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('counterClockwise')"/>
-        <q-btn v-bind="batchOptionsProps" icon="rotate_right" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('clockwise')"/>
+        <q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_ccw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('counterClockwise')"/>
+        <q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_cw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('clockwise')"/>
         <q-btn v-bind="batchOptionsProps" icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" @click="confirmBatchPhotoDelete"/>
       </q-card-actions>
     </q-card>
diff --git a/src/composables/photos/editor/crop.js b/src/composables/photos/editor/crop.js
index 3d0577b..0d446c2 100644
--- a/src/composables/photos/editor/crop.js
+++ b/src/composables/photos/editor/crop.js
@@ -8,45 +8,48 @@ export const croppedArea = ref(null);
 export const selectedAspectRatio = ref(null);
 
 watch(() => selectedAspectRatio.value, (newVal) => {
-    cropper.setAspectRatio(newVal);
+  cropper.setAspectRatio(newVal);
 })
 
-export const setCropData = () => {
-    const [w, h] = cropperImgSizes.value;
 
-    const cropData = cropper.getCropBoxData();
-    croppedArea.value = {
-        left: roundWithPrecision(cropData.left / w, 5),
-        top: roundWithPrecision(cropData.top / h, 5),
-        width: roundWithPrecision(cropData.width / w, 5),
-        height: roundWithPrecision(cropData.height / h, 5)
-    };
+export const setCropData = () => {
+  const [w, h] = cropperImgSizes.value;
+
+  console.log("crop end");
+
+  const cropData = cropper.getCropBoxData();
+  croppedArea.value = {
+    left: roundWithPrecision(cropData.left / w, 5),
+    top: roundWithPrecision(cropData.top / h, 5),
+    width: roundWithPrecision(cropData.width / w, 5),
+    height: roundWithPrecision(cropData.height / h, 5)
+  };
 }
 
 export const aspectRatioOptions = computed(() =>
-    [
-        {label: '16:9', value: roundWithPrecision(16 / 9, 5)},
-        {label: '4:3', value: roundWithPrecision(4 / 3, 5)},
-        {label: '9:16', value: roundWithPrecision(9 / 16, 5)},
-        {label: '3:4', value: roundWithPrecision(3 / 4, 5)},
-        {label: '1:1', value: 1},
-        {label: 'Volný', value: null},
-        {label: 'Původní', value: roundWithPrecision(photoAspectRatio.value, 5)},
-    ]
+  [
+    {label: '16:9', value: roundWithPrecision(16 / 9, 5)},
+    {label: '4:3', value: roundWithPrecision(4 / 3, 5)},
+    {label: '9:16', value: roundWithPrecision(9 / 16, 5)},
+    {label: '3:4', value: roundWithPrecision(3 / 4, 5)},
+    {label: '1:1', value: 1},
+    {label: 'Volný', value: null},
+    {label: 'Původní', value: roundWithPrecision(photoAspectRatio.value, 5)},
+  ]
 );
 
 export const cropperReady = (e) => {
-    if (croppedArea.value) {
-        const [w, h] = cropperImgSizes.value;
-        selectedAspectRatio.value = roundWithPrecision((croppedArea.value.width * w) / (croppedArea.value.height * h), 5);
+  if (croppedArea.value) {
+    const [w, h] = cropperImgSizes.value;
+    selectedAspectRatio.value = roundWithPrecision((croppedArea.value.width * w) / (croppedArea.value.height * h), 5);
 
-        cropper.setCropBoxData({
-            left: croppedArea.value.left * w,
-            top: croppedArea.value.top * h,
-            width: croppedArea.value.width * w,
-            height: croppedArea.value.height * h
-        });
-    } else {
-        selectedAspectRatio.value = roundWithPrecision(photoAspectRatio.value, 5);
-    }
+    cropper.setCropBoxData({
+      left: croppedArea.value.left * w,
+      top: croppedArea.value.top * h,
+      width: croppedArea.value.width * w,
+      height: croppedArea.value.height * h
+    });
+  } else {
+    selectedAspectRatio.value = roundWithPrecision(photoAspectRatio.value, 5);
+  }
 }
diff --git a/src/composables/photos/photo.js b/src/composables/photos/photo.js
deleted file mode 100644
index 5392a1c..0000000
--- a/src/composables/photos/photo.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {ref} from "vue";
-import {flight} from "src/composables/objects/flight";
-
-export const openPhotoDetail = ref(false);
-export const photoData = ref(null);
-export const openDetail = ({photo, idx, allPhotos}) => {
-  openPhotoDetail.value = true;
-  photoData.value = {photo, idx, allPhotos};
-}
-export const openPhotoFromList = ({photo, idx}) => {
-  openDetail({photo, idx, allPhotos: flight.value.photos});
-}
diff --git a/src/pages/profile/flight/FlightDetailPage.vue b/src/pages/profile/flight/FlightDetailPage.vue
index a804079..8fdcd06 100644
--- a/src/pages/profile/flight/FlightDetailPage.vue
+++ b/src/pages/profile/flight/FlightDetailPage.vue
@@ -69,11 +69,6 @@ const copyLinkToClipboard = () => {
   <FlightDetailSkeleton v-if="loading || !flight"/>
 
   <q-card class="flight-detail-card" v-else>
-<!--    <PhotoCarousel-->
-<!--        :cover-photo-url="flight.coverPhoto?.url"-->
-<!--        :carousel-title="flightName(flight)"-->
-<!--        :photos="flight.photos"-->
-<!--    />-->
     <q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
        <div class="absolute-bottom custom-caption">
           <div class="text-h5"> {{ flightName(flight) }} </div>
diff --git a/src/pages/profile/flight/PhotoEditorPage.vue b/src/pages/profile/flight/PhotoEditorPage.vue
index 4915d1c..c6df1db 100644
--- a/src/pages/profile/flight/PhotoEditorPage.vue
+++ b/src/pages/profile/flight/PhotoEditorPage.vue
@@ -1,6 +1,6 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {computed, onMounted, ref, watch} from "vue";
+import {onMounted, ref, watch} from "vue";
 import {usePhotosStore} from "stores/Photo";
 import {useAppStore} from "stores/App";
 import {flightName} from "src/composables/objects/flight";
@@ -9,14 +9,14 @@ import {croppedAreaForPreview, getPreviewUrl} from "src/composables/photos/edito
 import {compare, onResize, splitter, splitterWidth} from "src/composables/photos/editor/splitter";
 import {aspectRatioOptions, croppedArea, cropperReady, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
 import {fetchPhoto, loading, photo, photoAspectRatio} from "src/composables/photos/editor/photo";
-import {debounce, useQuasar} from "quasar";
+import {debounce, throttle, useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
 
 const $route = useRoute();
 const $q = useQuasar();
 const photoId = parseInt($route.params.id);
 const noCacheTimestamp = ref((new Date()).getTime());
-const editorTab = ref("colors");
+const editorTab = ref("rotate");
 
 // adjustments
 const defaultAdjustments = {
@@ -28,19 +28,16 @@ const defaultAdjustments = {
 };
 const adjustment = ref({...defaultAdjustments});
 const croppedAdjusted = ref("");
+const croppedAdjustedUnrotated = ref("");
 const uncroppedAdjusted = ref("");
 const croppedUnadjusted = ref("");
 
 watch(() => [adjustment.value, croppedAreaForPreview.value], debounce(() => {
   croppedAdjusted.value = getPreviewUrl(photoId, {...adjustment.value, ...croppedAreaForPreview.value});
+  croppedAdjustedUnrotated.value = getPreviewUrl(photoId, {...adjustment.value, rotate: 0, ...croppedAreaForPreview.value});
   uncroppedAdjusted.value = getPreviewUrl(photoId, {...adjustment.value});
   croppedUnadjusted.value = getPreviewUrl(photoId, {rotate: adjustment.value.rotate, ...croppedAreaForPreview.value});
-}, 100), {deep: true, immediate: true});
-
-watch(() => adjustment.value.rotate, (newVal) => {
-  if (!cropper) return;
-  cropper.rotateTo(newVal);
-});
+}, 200), {deep: true, immediate: true});
 
 const savePhotoAdjustment = (photoId) => {
   const adjustmentInput = {...adjustment.value, crop: croppedArea.value};
@@ -64,6 +61,7 @@ onMounted(() => {
       }
 
       if (photoAdjustment) {
+        rotate.value = photoAdjustment.rotate;
         croppedArea.value = {
           left: photoAdjustment.cropLeft,
           top: photoAdjustment.cropTop,
@@ -92,51 +90,57 @@ onMounted(() => {
   <template v-if="!loading">
     <q-card :style="`width: ${splitterWidth}px; margin: 0 auto`">
       <VuePictureCropper
-          v-if="editorTab === 'rotate_crop'"
-          :img="uncroppedAdjusted"
-          :boxStyle="{
+        v-if="editorTab === 'crop'"
+        :img="uncroppedAdjusted"
+        :boxStyle="{
             width: '100%',
             height: '100%',
             backgroundColor: '#f8f8f8',
             margin: 'auto',
           }"
-          :options="{
-            viewMode: 1,
-            autoCropArea: 1,
-            dragMode: 'none',
-            zoomable: false,
-            draggable: false,
-          }"
-          @cropend="setCropData"
-          @ready="cropperReady"
+        :options="{
+          viewMode: 1,
+          autoCropArea: 1,
+          dragMode: 'none',
+          zoomable: false,
+          draggable: false,
+          rotatable: false,
+        }"
+        @cropend="setCropData"
+        @ready="cropperReady"
       />
 
+      <div class="overflow-hidden relative-position" v-else-if="editorTab === 'rotate'">
+        <div class="rotate-overlay"></div>
+        <q-img :src="croppedAdjustedUnrotated" fit="contain" :style="`transform: rotate(${adjustment.rotate}deg)`"/>
+      </div>
+
       <div class="overflow-hidden" v-else>
         <q-img fit="contain" :src="croppedAdjusted" v-show="!compare"/>
         <q-splitter
-            v-show="compare"
-            v-model="splitter"
-            :limits="[0, 100]"
-            :style="{
+          v-show="compare"
+          v-model="splitter"
+          :limits="[0, 100]"
+          :style="{
               height: Math.round(splitterWidth / photoAspectRatio) + 'px',
               width: splitterWidth.value + 'px'
             }"
-            before-class="overflow-hidden"
-            after-class="overflow-hidden">
+          before-class="overflow-hidden"
+          after-class="overflow-hidden">
           <template #before>
             <img
-                :width="splitterWidth"
-                class="absolute-top-left"
-                :src="croppedUnadjusted"
-                alt="before"
+              :width="splitterWidth"
+              class="absolute-top-left"
+              :src="croppedUnadjusted"
+              alt="before"
             />
           </template>
           <template #after>
             <img
-                :width="splitterWidth"
-                class="absolute-top-right"
-                :src="croppedAdjusted"
-                alt="after"
+              :width="splitterWidth"
+              class="absolute-top-right"
+              :src="croppedAdjusted"
+              alt="after"
             />
           </template>
         </q-splitter>
@@ -154,7 +158,8 @@ onMounted(() => {
         <q-tabs v-model="editorTab">
           <q-tab name="colors" icon="palette" label="Barvy"/>
           <q-tab name="details" icon="deblur" label="Detialy"/>
-          <q-tab name="rotate_crop" icon="crop_rotate" label="Oříznout a otočit"/>
+          <q-tab name="rotate" icon="rotate" label="Otočit"/>
+          <q-tab name="crop" icon="crop" label="Oříznout"/>
         </q-tabs>
         <q-separator/>
 
@@ -167,12 +172,13 @@ onMounted(() => {
                 </q-item-section>
                 <q-item-section>
                   <q-slider
-                      v-model="adjustment.contrast"
-                      :min="0.5"
-                      :max="1.5"
-                      :step="0.01"
-                      @dblclick="adjustment.contrast=1"
-                      :label="true"
+                    v-model="adjustment.contrast"
+                    :min="0.5"
+                    :max="1.5"
+                    :step="0.01"
+                    label-always
+                    @dblclick="adjustment.contrast=1"
+                    :label="true"
                   />
                 </q-item-section>
               </q-item>
@@ -183,12 +189,13 @@ onMounted(() => {
                 </q-item-section>
                 <q-item-section>
                   <q-slider
-                      v-model="adjustment.brightness"
-                      :min="0.5"
-                      :max="1.5"
-                      :step="0.01"
-                      :label="true"
-                      @dblclick="adjustment.brightness = 1"
+                    v-model="adjustment.brightness"
+                    :min="0.5"
+                    :max="1.5"
+                    :step="0.01"
+                    :label="true"
+                    label-always
+                    @dblclick="adjustment.brightness = 1"
                   />
                 </q-item-section>
               </q-item>
@@ -199,12 +206,13 @@ onMounted(() => {
                 </q-item-section>
                 <q-item-section>
                   <q-slider
-                      v-model="adjustment.saturation"
-                      :min="0"
-                      :max="2"
-                      :step="0.05"
-                      :label="true"
-                      @dblclick="adjustment.saturation = 1"
+                    v-model="adjustment.saturation"
+                    :min="0"
+                    :max="2"
+                    :step="0.05"
+                    :label="true"
+                    label-always
+                    @dblclick="adjustment.saturation = 1"
                   />
                 </q-item-section>
               </q-item>
@@ -218,44 +226,52 @@ onMounted(() => {
                 </q-item-section>
                 <q-item-section>
                   <q-slider
-                      v-model="adjustment.sharpness"
-                      :min="-3"
-                      :max="8"
-                      :step="1"
-                      :label="true"
-                      @dblclick="adjustment.sharpness=1"
+                    v-model="adjustment.sharpness"
+                    :min="-3"
+                    :max="8"
+                    :step="1"
+                    :label="true"
+                    label-always
+                    snap
+                    @dblclick="adjustment.sharpness=1"
                   />
                 </q-item-section>
               </q-item>
             </q-list>
           </q-tab-panel>
-          <q-tab-panel name="rotate_crop">
-            <q-btn-toggle
-                no-caps
-                spread
-                v-model="selectedAspectRatio"
-                toggle-color="primary"
-                :options="aspectRatioOptions"
-                class="q-ma-lg"
-            />
+          <q-tab-panel name="rotate">
             <q-list>
               <q-item>
                 <q-item-section avatar>
-                  <q-icon name="flip_camera_android"/>
+                  <q-btn round flat icon="rotate_left" @click="adjustment.rotate -= 0.1"/>
                 </q-item-section>
                 <q-item-section>
-                  <q-slider
+                    <q-slider
                       v-model="adjustment.rotate"
-                      :min="-90"
-                      :max="90"
+                      :min="-45"
+                      :max="45"
                       :step="0.1"
                       :label="true"
+                      label-always
                       @dblclick="adjustment.rotate=0"
-                  />
+                    />
+                </q-item-section>
+                <q-item-section avatar>
+                  <q-btn round flat icon="rotate_right" @click="adjustment.rotate += 0.1"/>
                 </q-item-section>
               </q-item>
             </q-list>
           </q-tab-panel>
+          <q-tab-panel name="crop">
+            <q-btn-toggle
+              no-caps
+              spread
+              v-model="selectedAspectRatio"
+              toggle-color="primary"
+              :options="aspectRatioOptions"
+              class="q-ma-lg"
+            />
+          </q-tab-panel>
         </q-tab-panels>
       </q-card-section>
       <q-card-actions>
@@ -265,3 +281,17 @@ onMounted(() => {
     </q-card>
   </template>
 </template>
+
+
+<style>
+.rotate-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 888;
+  background-size: 60px 60px;
+  background-image: linear-gradient(to right, rgba(61, 4, 4, 0.5) 1px, transparent 1px),
+  linear-gradient(to bottom, rgba(61, 4, 4, 0.5) 1px, transparent 1px);
+}
+</style>