github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix ligatures, move dimensions

Browse Source
This commit is contained in:
rijkvanzanten
2020-10-16 16:27:27 -04:00
parent 8d72e198c8
commit 4ba58049ef
3 changed files with 22 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/lang/en-US/index.json
View File

@@ -919,7 +919,7 @@
"scope": "Scope",
"layout": "Layout",
"editing_file": "Editing File: {title}",
"changes_are_immediate_and_permanent": "Changes are immediate and permanent",
"changes_are_permanent": "Changes are permanent",
"preset_name_placeholder": "Name of bookmark...",
"editing_preset": "Editing Preset",

2
app/src/styles/mixins/type-styles.scss
View File

@@ -7,7 +7,7 @@
font-family: var(--family-sans-serif);
font-style: normal;
line-height: 29px;
letter-spacing: -0.8px;
letter-spacing: 0;
@include breakpoint(small) {
font-size: 24px;

45
app/src/views/private/components/image-editor/image-editor.vue
View File

@@ -5,7 +5,7 @@
</template>
<template #subtitle>
<span class="warning">{{ $t('changes_are_immediate_and_permanent') }}</span>
<span class="warning">{{ $t('changes_are_permanent') }}</span>
</template>
<div class="loader" v-if="loading">
@@ -21,7 +21,7 @@
<div class="toolbar">
<div
v-tooltip.bottom.inverted="$t('drag_mode')"
v-tooltip.top.inverted="$t('drag_mode')"
class="drag-mode toolbar-button"
@click="dragMode = dragMode === 'crop' ? 'move' : 'crop'"
>
@@ -29,27 +29,19 @@
<v-icon name="crop" :class="{ active: dragMode === 'crop' }" />
</div>
<v-icon name="rotate_90_degrees_ccw" @click="rotate" v-tooltip.bottom.inverted="$t('rotate')" />
<v-icon name="rotate_90_degrees_ccw" @click="rotate" v-tooltip.top.inverted="$t('rotate')" />
<v-icon
name="flip_horizontal"
@click="flip('horizontal')"
v-tooltip.bottom.inverted="$t('flip_horizontal')"
v-tooltip.top.inverted="$t('flip_horizontal')"
/>
<v-icon
name="flip_vertical"
@click="flip('vertical')"
v-tooltip.bottom.inverted="$t('flip_vertical')"
/>
<v-icon name="flip_vertical" @click="flip('vertical')" v-tooltip.top.inverted="$t('flip_vertical')" />
<v-menu placement="top" show-arrow>
<template #activator="{ toggle }">
<v-icon
:name="aspectRatioIcon"
@click="toggle"
v-tooltip.bottom.inverted="$t('aspect_ratio')"
/>
<v-icon :name="aspectRatioIcon" @click="toggle" v-tooltip.top.inverted="$t('aspect_ratio')" />
</template>
<v-list>
@@ -90,22 +82,22 @@
<div class="spacer" />
<div class="dimensions" v-if="imageData">
{{ $n(imageData.width) }}x{{ $n(imageData.height) }}
<template
v-if="imageData.width !== newDimensions.width || imageData.height !== newDimensions.height"
>
->
{{ $n(newDimensions.width) }}x{{ $n(newDimensions.height) }}
</template>
</div>
<button class="toolbar-button cancel" v-show="cropping" @click="cropping = false">
{{ $t('cancel_crop') }}
</button>
</div>
</div>
<template #actions:prepend>
<div class="dimensions" v-if="imageData">
{{ $n(imageData.width) }}x{{ $n(imageData.height) }}
<template v-if="imageData.width !== newDimensions.width || imageData.height !== newDimensions.height">
->
{{ $n(newDimensions.width) }}x{{ $n(newDimensions.height) }}
</template>
</div>
</template>
<template #actions>
<v-button @click="save" :loading="saving" icon rounded v-tooltip.bottom="$t('save')">
<v-icon name="check" />
@@ -117,6 +109,7 @@
<script lang="ts">
import { defineComponent, ref, watch, computed, reactive } from '@vue/composition-api';
import api from '@/api';
import Vue from 'vue';
import Cropper from 'cropperjs';
import { nanoid } from 'nanoid';
@@ -274,7 +267,8 @@ export default defineComponent({
}, imageData.value?.type);
}
function onImageLoad() {
async function onImageLoad() {
await Vue.nextTick();
initCropper();
}
}
@@ -478,6 +472,7 @@ export default defineComponent({
.dimensions {
margin-right: 12px;
color: var(--foreground-subdued);
letter-spacing: 0;
font-feature-settings: 'tnum';
}