diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/diff_viewer')
6 files changed, 55 insertions, 109 deletions
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue index 9c3f3e7f7a9..bb2e0e12c11 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue @@ -60,9 +60,7 @@ export default { </script> <template> - <div - v-if="viewer" - class="diff-file preview-container"> + <div v-if="viewer" class="diff-file preview-container"> <component :is="viewer" :diff-mode="diffMode" @@ -70,11 +68,7 @@ export default { :old-path="fullOldPath" :project-path="projectPath" > - <slot - slot="image-overlay" - name="image-overlay" - > - </slot> + <slot slot="image-overlay" name="image-overlay"> </slot> </component> <slot></slot> </div> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue index 50389b6ae63..40ae9ed6c02 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue @@ -32,37 +32,19 @@ export default { <template> <div class="diff-file-container"> <div class="diff-viewer"> - <div - v-if="diffMode === $options.diffModes.replaced" - class="two-up view row"> + <div v-if="diffMode === $options.diffModes.replaced" class="two-up view row"> <div class="col-sm-6 deleted"> - <download-viewer - :path="oldPath" - :project-path="projectPath" - /> + <download-viewer :path="oldPath" :project-path="projectPath" /> </div> <div class="col-sm-6 added"> - <download-viewer - :path="newPath" - :project-path="projectPath" - /> + <download-viewer :path="newPath" :project-path="projectPath" /> </div> </div> - <div - v-else-if="diffMode === $options.diffModes.new" - class="added"> - <download-viewer - :path="newPath" - :project-path="projectPath" - /> + <div v-else-if="diffMode === $options.diffModes.new" class="added"> + <download-viewer :path="newPath" :project-path="projectPath" /> </div> - <div - v-else - class="deleted"> - <download-viewer - :path="oldPath" - :project-path="projectPath" - /> + <div v-else class="deleted"> + <download-viewer :path="oldPath" :project-path="projectPath" /> </div> </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue index cd0c1e850af..f085ef35ccc 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue @@ -100,17 +100,19 @@ export default { <div class="onion-skin view"> <div :style="{ - 'width': onionMaxPixelWidth, - 'height': onionMaxPixelHeight, + width: onionMaxPixelWidth, + height: onionMaxPixelHeight, 'user-select': dragging === true ? 'none' : '', }" - class="onion-skin-frame"> + class="onion-skin-frame" + > <div :style="{ - 'width': onionMaxPixelWidth, - 'height': onionMaxPixelHeight, + width: onionMaxPixelWidth, + height: onionMaxPixelHeight, }" - class="frame deleted"> + class="frame deleted" + > <image-viewer key="onionOldImg" :render-info="false" @@ -121,36 +123,25 @@ export default { <div ref="addedFrame" :style="{ - 'opacity': onionOpacity, - 'width': onionMaxPixelWidth, - 'height': onionMaxPixelHeight, + opacity: onionOpacity, + width: onionMaxPixelWidth, + height: onionMaxPixelHeight, }" - class="added frame"> + class="added frame" + > <image-viewer key="onionNewImg" :render-info="false" :path="newPath" @imgLoaded="onionNewImgLoaded" > - <slot - slot="image-overlay" - name="image-overlay" - > - </slot> + <slot slot="image-overlay" name="image-overlay"> </slot> </image-viewer> </div> <div class="controls"> <div class="transparent"></div> - <div - ref="dragTrack" - class="drag-track" - @mousedown="startDrag" - @mouseup="stopDrag"> - <div - ref="dragger" - :style="{ 'left': onionDraggerPixelPos }" - class="dragger"> - </div> + <div ref="dragTrack" class="drag-track" @mousedown="startDrag" @mouseup="stopDrag"> + <div ref="dragger" :style="{ left: onionDraggerPixelPos }" class="dragger"></div> </div> <div class="opaque"></div> </div> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue index 57f373fca21..1c970b72a66 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue @@ -104,9 +104,7 @@ export default { <template> <div class="swipe view"> - <div - ref="swipeFrame" - class="swipe-frame"> + <div ref="swipeFrame" class="swipe-frame"> <image-viewer key="swipeOldImg" ref="swipeOldImg" @@ -118,7 +116,7 @@ export default { <div ref="swipeWrap" :style="{ - width: `${swipeWrapWidth}%` + width: `${swipeWrapWidth}%`, }" class="swipe-wrap" > @@ -127,26 +125,22 @@ export default { :render-info="false" :path="newPath" :style="{ - width: swipeMaxPixelWidth + width: swipeMaxPixelWidth, }" class="frame added" @imgLoaded="swipeNewImgLoaded" > - <slot - slot="image-overlay" - name="image-overlay" - > - </slot> + <slot slot="image-overlay" name="image-overlay"> </slot> </image-viewer> </div> <span ref="swipeBar" - :style="{ 'left': swipeBarPixelPos }" + :style="{ left: swipeBarPixelPos }" class="swipe-bar" @mousedown="startDrag" - @mouseup="stopDrag"> - <span class="top-handle"></span> - <span class="bottom-handle"></span> + @mouseup="stopDrag" + > + <span class="top-handle"></span> <span class="bottom-handle"></span> </span> </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue index aafa88f4ff1..a17fc022195 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue @@ -32,11 +32,7 @@ export default { :inner-css-classes="['frame', 'added']" class="wrap w-50" > - <slot - slot="image-overlay" - name="image-overlay" - > - </slot> + <slot slot="image-overlay" name="image-overlay"> </slot> </image-viewer> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue index d7f24c1afc5..d5fda7e4ed3 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue @@ -63,65 +63,54 @@ export default { <template> <div class="diff-file-container"> - <div - v-if="diffMode === $options.diffModes.replaced" - class="diff-viewer"> + <div v-if="diffMode === $options.diffModes.replaced" class="diff-viewer"> <div class="image js-replaced-image"> - <component - :is="imageViewComponent" - v-bind="$props" - > - <slot - slot="image-overlay" - name="image-overlay" - > - </slot> + <component :is="imageViewComponent" v-bind="$props"> + <slot slot="image-overlay" name="image-overlay"> </slot> </component> </div> <div class="view-modes"> <ul class="view-modes-menu"> <li :class="{ - active: mode === $options.imageViewMode.twoup + active: mode === $options.imageViewMode.twoup, }" - @click="changeMode($options.imageViewMode.twoup)"> + @click="changeMode($options.imageViewMode.twoup);" + > {{ s__('ImageDiffViewer|2-up') }} </li> <li :class="{ - active: mode === $options.imageViewMode.swipe + active: mode === $options.imageViewMode.swipe, }" - @click="changeMode($options.imageViewMode.swipe)"> + @click="changeMode($options.imageViewMode.swipe);" + > {{ s__('ImageDiffViewer|Swipe') }} </li> <li :class="{ - active: mode === $options.imageViewMode.onion + active: mode === $options.imageViewMode.onion, }" - @click="changeMode($options.imageViewMode.onion)"> + @click="changeMode($options.imageViewMode.onion);" + > {{ s__('ImageDiffViewer|Onion skin') }} </li> </ul> </div> </div> - <div - v-else - class="diff-viewer" - > + <div v-else class="diff-viewer"> <div class="image"> <image-viewer :path="imagePath" - :inner-css-classes="['frame', { - 'added': isNew, - 'deleted': diffMode === $options.diffModes.deleted - }]" + :inner-css-classes="[ + 'frame', + { + added: isNew, + deleted: diffMode === $options.diffModes.deleted, + }, + ]" > - <slot - v-if="isNew || isRenamed" - slot="image-overlay" - name="image-overlay" - > - </slot> + <slot v-if="isNew || isRenamed" slot="image-overlay" name="image-overlay"> </slot> </image-viewer> </div> </div> |