Change print width to 120 (#671)

* Increase line-width to 120

* Auto-fix 100->120 columns
This commit is contained in:
Rijk van Zanten
2020-06-01 16:50:08 -04:00
committed by GitHub
parent a2d04ecd26
commit 4c2f5dc2ba
153 changed files with 453 additions and 1819 deletions

View File

@@ -1,10 +1,5 @@
<template>
<v-textarea
class="new-comment"
:placeholder="$t('leave_comment')"
v-model="newCommentContent"
expand-on-focus
>
<v-textarea class="new-comment" :placeholder="$t('leave_comment')" v-model="newCommentContent" expand-on-focus>
<template #append>
<v-icon name="alternate_email" class="add-mention" />
<v-icon name="insert_emoticon" class="add-emoji" />

View File

@@ -10,10 +10,7 @@
</v-avatar>
<div class="name">
<user-popover
v-if="activity.action_by && activity.action_by.id"
:user="activity.action_by.id"
>
<user-popover v-if="activity.action_by && activity.action_by.id" :user="activity.action_by.id">
<span>
<template v-if="activity.action_by && activity.action_by">
{{ activity.action_by.first_name }} {{ activity.action_by.last_name }}
@@ -31,11 +28,7 @@
<template #activator="{ toggle, active }">
<v-icon class="more" :class="{ active }" name="more_horiz" @click="toggle" />
<div class="time">
<span
class="dot"
v-if="activity.edited_on !== null"
v-tooltip="editedOnFormatted"
/>
<span class="dot" v-if="activity.edited_on !== null" v-tooltip="editedOnFormatted" />
{{ formattedTime }}
</div>
</template>
@@ -121,9 +114,8 @@ export default defineComponent({
if (!props.activity.action_by?.avatar) return null;
return (
props.activity.action_by.avatar.data.thumbnails.find(
(thumb) => thumb.key === 'directus-small-crop'
)?.url || null
props.activity.action_by.avatar.data.thumbnails.find((thumb) => thumb.key === 'directus-small-crop')
?.url || null
);
});

View File

@@ -9,12 +9,7 @@
{{ $t('cancel') }}
</v-button>
<v-button
:loading="savingEdits"
class="post-comment"
@click="saveEdits"
x-small
>
<v-button :loading="savingEdits" class="post-comment" @click="saveEdits" x-small>
{{ $t('save') }}
</v-button>
</div>
@@ -55,9 +50,7 @@ export default defineComponent({
setup(props) {
const projectsStore = useProjectsStore();
const htmlContent = computed(() =>
props.activity.comment ? marked(props.activity.comment) : null
);
const htmlContent = computed(() => (props.activity.comment ? marked(props.activity.comment) : null));
const { edits, editing, savingEdits, saveEdits, cancelEditing } = useEdits();
@@ -190,8 +183,7 @@ export default defineComponent({
font-size: 12px;
background-color: var(--background-normal);
border-radius: 12px;
transition: color var(--fast) var(--transition),
background-color var(--fast) var(--transition);
transition: color var(--fast) var(--transition), background-color var(--fast) var(--transition);
}
&:hover span {

View File

@@ -51,10 +51,7 @@ export default defineComponent({
setup(props) {
const projectsStore = useProjectsStore();
const { activity, loading, error, refresh } = useActivity(
props.collection,
props.primaryKey
);
const { activity, loading, error, refresh } = useActivity(props.collection, props.primaryKey);
return {
activity,
@@ -77,29 +74,26 @@ export default defineComponent({
loading.value = true;
try {
const response = await api.get(
`/${projectsStore.state.currentProjectKey}/activity`,
{
params: {
'filter[collection][eq]': collection,
'filter[item][eq]': primaryKey,
'filter[action][in]': 'comment',
'filter[comment_deleted_on][null]': 1,
sort: '-id', // directus_activity has auto increment and is therefore in chronological order
fields: [
'id',
'action',
'action_on',
'action_by.id',
'action_by.first_name',
'action_by.last_name',
'action_by.avatar.data',
'comment',
'edited_on',
],
},
}
);
const response = await api.get(`/${projectsStore.state.currentProjectKey}/activity`, {
params: {
'filter[collection][eq]': collection,
'filter[item][eq]': primaryKey,
'filter[action][in]': 'comment',
'filter[comment_deleted_on][null]': 1,
sort: '-id', // directus_activity has auto increment and is therefore in chronological order
fields: [
'id',
'action',
'action_on',
'action_by.id',
'action_by.first_name',
'action_by.last_name',
'action_by.avatar.data',
'comment',
'edited_on',
],
},
});
const activityByDate = groupBy(response.data.data, (activity: Activity) => {
// activity's action_on date is in iso-8601
@@ -120,15 +114,8 @@ export default defineComponent({
if (today) dateFormatted = i18n.t('today');
else if (yesterday) dateFormatted = i18n.t('yesterday');
else if (thisYear)
dateFormatted = await formatLocalized(
date,
String(i18n.t('date-fns_date_short_no_year'))
);
else
dateFormatted = await formatLocalized(
date,
String(i18n.t('date-fns_date_short'))
);
dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short_no_year')));
else dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short')));
activityGrouped.push({
date: date,

View File

@@ -28,12 +28,7 @@
<v-icon class="remove" name="close" @click="$emit('remove')" />
</div>
<div class="field">
<filter-input
v-model="value"
:type="parsedField.type"
:operator="activeOperator"
:disabled="disabled"
/>
<filter-input v-model="value" :type="parsedField.type" :operator="activeOperator" :disabled="disabled" />
</div>
</div>
</template>

View File

@@ -18,13 +18,7 @@
<v-menu attached close-on-content-click :disabled="loading">
<template #activator="{ toggle, active }">
<v-input
@click="toggle"
:class="{ active }"
readonly
:value="$t('add_filter')"
:disabled="loading"
>
<v-input @click="toggle" :class="{ active }" readonly :value="$t('add_filter')" :disabled="loading">
<template #prepend><v-icon name="add" /></template>
<template #append><v-icon name="expand_more" /></template>
</v-input>
@@ -78,10 +72,7 @@ export default defineComponent({
const fieldTree = computed<FieldTree[]>(() => {
return fieldsStore
.getFieldsForCollection(props.collection)
.filter(
(field: Field) =>
field.hidden_browse === false && field.type.toLowerCase() !== 'alias'
)
.filter((field: Field) => field.hidden_browse === false && field.type.toLowerCase() !== 'alias')
.map((field: Field) => parseField(field, []));
function parseField(field: Field, parents: Field[]) {
@@ -94,10 +85,7 @@ export default defineComponent({
return fieldInfo;
}
const relations = relationsStore.getRelationsForField(
field.collection,
field.field
);
const relations = relationsStore.getRelationsForField(field.collection, field.field);
if (relations.length > 0) {
const relatedFields = relations
@@ -113,8 +101,7 @@ export default defineComponent({
.getFieldsForCollection(relatedCollection)
.filter(
(field: Field) =>
field.hidden_browse === false &&
field.type.toLowerCase() !== 'alias'
field.hidden_browse === false && field.type.toLowerCase() !== 'alias'
);
})
.flat()

View File

@@ -45,13 +45,7 @@
</template>
<template v-else-if="['empty', 'nempty'].includes(operator) === false">
<v-checkbox v-if="type === 'checkbox'" :inputValue="_value" :disabled="disabled" />
<v-input
:disabled="disabled"
v-else
v-model="_value"
:type="type"
:placeholder="$t('enter_a_value')"
/>
<v-input :disabled="disabled" v-else v-model="_value" :type="type" :placeholder="$t('enter_a_value')" />
</template>
</div>
</template>

View File

@@ -8,14 +8,7 @@
<slot />
</div>
<v-button
class="drawer-toggle"
icon
rounded
secondary
outlined
@click="$emit('toggle:drawer')"
>
<v-button class="drawer-toggle" icon rounded secondary outlined @click="$emit('toggle:drawer')">
<v-icon name="info" />
</v-button>
</div>

View File

@@ -16,18 +16,9 @@
error
</v-notice>
<div
v-show="imageData && imageData.data.full_url && !loading && !error"
class="editor-container"
>
<div v-show="imageData && imageData.data.full_url && !loading && !error" class="editor-container">
<div class="editor">
<img
ref="imageElement"
:src="imageURL"
role="presentation"
alt=""
@load="onImageLoad"
/>
<img ref="imageElement" :src="imageURL" role="presentation" alt="" @load="onImageLoad" />
</div>
<div class="toolbar">
@@ -40,11 +31,7 @@
<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.bottom.inverted="$t('rotate')" />
<v-icon
name="flip_horizontal"
@@ -182,16 +169,7 @@ export default defineComponent({
},
});
const {
loading,
error,
imageData,
imageElement,
save,
saving,
fetchImage,
onImageLoad,
} = useImage();
const { loading, error, imageData, imageElement, save, saving, fetchImage, onImageLoad } = useImage();
const {
cropperInstance,
@@ -268,14 +246,7 @@ export default defineComponent({
loading.value = true;
const response = await api.get(`/${currentProjectKey}/files/${props.id}`, {
params: {
fields: [
'data',
'type',
'filesize',
'filename_download',
'width',
'height',
],
fields: ['data', 'type', 'filesize', 'filename_download', 'width', 'height'],
},
});
@@ -425,10 +396,7 @@ export default defineComponent({
crop: throttle((event) => {
if (!imageData.value) return;
if (
cropping.value === false &&
(event.detail.width || event.detail.height)
) {
if (cropping.value === false && (event.detail.width || event.detail.height)) {
cropping.value = true;
}

View File

@@ -19,14 +19,7 @@
</template>
<script lang="ts">
import {
defineComponent,
PropType,
ref,
computed,
toRefs,
onUnmounted,
} from '@vue/composition-api';
import { defineComponent, PropType, ref, computed, toRefs, onUnmounted } from '@vue/composition-api';
import { Filter } from '@/stores/collection-presets/types';
import useCollectionPreset from '@/composables/use-collection-preset';

View File

@@ -56,10 +56,8 @@ export const withCustomLogo = () =>
project_logo: {
full_url:
'https://demo.directus.io/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
url:
'/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
asset_url:
'/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
url: '/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
asset_url: '/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
},
project_color: '#4CAF50',
project_foreground: null,

View File

@@ -1,21 +1,10 @@
<template>
<component
:is="url ? 'a' : 'div'"
:href="url"
target="_blank"
ref="noopener noreferer"
class="module-bar-logo"
>
<component :is="url ? 'a' : 'div'" :href="url" target="_blank" ref="noopener noreferer" class="module-bar-logo">
<template v-if="customLogoPath">
<v-progress-circular indeterminate v-if="showLoader" />
<img v-else class="custom-logo" :src="customLogoPath" alt="Project Logo" />
</template>
<div
v-else
class="logo"
:class="{ running: showLoader }"
@animationiteration="stopRunningIfQueueIsEmpty"
/>
<div v-else class="logo" :class="{ running: showLoader }" @animationiteration="stopRunningIfQueueIsEmpty" />
</component>
</template>

View File

@@ -48,11 +48,7 @@ export default defineComponent({
const _modules = computed(() => {
const customModuleListing = userStore.state.currentUser?.role.module_listing;
if (
customModuleListing &&
Array.isArray(customModuleListing) &&
customModuleListing.length > 0
) {
if (customModuleListing && Array.isArray(customModuleListing) && customModuleListing.length > 0) {
return customModuleListing.map((custom) => {
if (custom.link.startsWith('http') || custom.link.startsWith('//')) {
return {
@@ -76,10 +72,7 @@ export default defineComponent({
}))
.filter((module) => {
if (module.hidden !== undefined) {
if (
(module.hidden as boolean) === true ||
(module.hidden as Ref<boolean>).value === true
) {
if ((module.hidden as boolean) === true || (module.hidden as Ref<boolean>).value === true) {
return false;
}
}

View File

@@ -3,11 +3,7 @@
<transition-expand tag="div">
<div v-if="active" class="inline">
<div class="padding-box">
<router-link
class="link"
:to="activityLink"
:class="{ 'has-items': lastFour.length > 0 }"
>
<router-link class="link" :to="activityLink" :class="{ 'has-items': lastFour.length > 0 }">
{{ $t('show_all_activity') }}
</router-link>
<transition-group tag="div" name="notification" class="transition">

View File

@@ -1,11 +1,6 @@
<template>
<div class="project-chooser" :class="{ active }">
<button
ref="activator"
class="toggle"
:disabled="projects.length === 1"
@click="active = !active"
>
<button ref="activator" class="toggle" :disabled="projects.length === 1" @click="active = !active">
<latency-indicator />
<span class="name">{{ currentProject.name }}</span>
<v-icon class="icon" name="expand_more" />
@@ -114,8 +109,7 @@ export default defineComponent({
color: var(--foreground-subdued);
transform: rotate(0deg);
opacity: 0;
transition: opacity var(--fast) var(--transition),
transform var(--medium) var(--transition);
transition: opacity var(--fast) var(--transition), transform var(--medium) var(--transition);
}
&:hover .icon {

View File

@@ -59,9 +59,7 @@ export default defineComponent({
},
},
setup(props) {
const displayInfo = computed(
() => displays.find((display) => display.id === props.display) || null
);
const displayInfo = computed(() => displays.find((display) => display.id === props.display) || null);
return { displayInfo };
},
});

View File

@@ -54,17 +54,11 @@ export default defineComponent({
});
const time = computed(() => {
return format(
new Date(props.revision.activity.action_on),
String(i18n.t('date-fns_time'))
);
return format(new Date(props.revision.activity.action_on), String(i18n.t('date-fns_time')));
});
const user = computed(() => {
if (
props.revision.activity.action_by !== null &&
typeof props.revision.activity.action_by === 'object'
) {
if (props.revision.activity.action_by !== null && typeof props.revision.activity.action_by === 'object') {
const { first_name, last_name } = props.revision.activity.action_by as {
first_name: string;
last_name: string;

View File

@@ -138,16 +138,11 @@ export default defineComponent({
}
);
const revisionsGroupedByDate = groupBy(
response.data.data,
(revision: Revision) => {
// revision's action_on date is in iso-8601
const date = new Date(
new Date(revision.activity.action_on).toDateString()
);
return date;
}
);
const revisionsGroupedByDate = groupBy(response.data.data, (revision: Revision) => {
// revision's action_on date is in iso-8601
const date = new Date(new Date(revision.activity.action_on).toDateString());
return date;
});
const revisionsGrouped: RevisionsByDate[] = [];
@@ -162,15 +157,8 @@ export default defineComponent({
if (today) dateFormatted = i18n.t('today');
else if (yesterday) dateFormatted = i18n.t('yesterday');
else if (thisYear)
dateFormatted = await formatLocalized(
date,
String(i18n.t('date-fns_date_short_no_year'))
);
else
dateFormatted = await formatLocalized(
date,
String(i18n.t('date-fns_date_short'))
);
dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short_no_year')));
else dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short')));
revisionsGrouped.push({
date: date,

View File

@@ -79,15 +79,9 @@ export default defineComponent({
return { _current, options, selectedOption };
async function getFormattedDate(revision: Revision) {
const date = await localizedFormat(
new Date(revision!.activity.action_on),
String(i18n.t('date-fns_date'))
);
const date = await localizedFormat(new Date(revision!.activity.action_on), String(i18n.t('date-fns_date')));
const time = await localizedFormat(
new Date(revision!.activity.action_on),
String(i18n.t('date-fns_time'))
);
const time = await localizedFormat(new Date(revision!.activity.action_on), String(i18n.t('date-fns_time')));
return `${date} (${time})`;
}

View File

@@ -1,10 +1,5 @@
<template>
<v-form
disabled
:collection="revision.collection"
:primary-key="revision.item"
:initial-values="revision.data"
/>
<v-form disabled :collection="revision.collection" :primary-key="revision.item" :initial-values="revision.data" />
</template>
<script lang="ts">

View File

@@ -31,9 +31,7 @@ export default defineComponent({
const fieldsStore = useFieldsStore();
const previousRevision = computed(() => {
const currentIndex = props.revisions.findIndex(
(revision) => revision.id === props.revision.id
);
const currentIndex = props.revisions.findIndex((revision) => revision.id === props.revision.id);
// This is assuming props.revisions is in chronological order from newest to oldest
return props.revisions[currentIndex + 1];

View File

@@ -13,10 +13,7 @@
</template>
<div class="content">
<revisions-modal-preview
v-if="currentTab[0] === 'preview'"
:revision="currentRevision"
/>
<revisions-modal-preview v-if="currentTab[0] === 'preview'" :revision="currentRevision" />
<revisions-modal-updates
v-if="currentTab[0] === 'updates'"
:revision="currentRevision"

View File

@@ -3,12 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueCompositionAPI from '@vue/composition-api';
import { i18n } from '@/lang';
import VList, {
VListItem,
VListItemIcon,
VListItemContent,
VListItemHint,
} from '@/components/v-list/';
import VList, { VListItem, VListItemIcon, VListItemContent, VListItemHint } from '@/components/v-list/';
import VIcon from '@/components/v-icon';
import VMenu from '@/components/v-menu';

View File

@@ -33,10 +33,7 @@ export default defineComponent({
}
});
const emitValue = debounce(
(event: InputEvent) => emit('input', (event.target as HTMLInputElement).value),
850
);
const emitValue = debounce((event: InputEvent) => emit('input', (event.target as HTMLInputElement).value), 850);
return { active, disable, input, emitValue, emptyAndClose };

View File

@@ -22,9 +22,7 @@
</v-avatar>
<div class="data">
<div class="name type-title">{{ data.first_name }} {{ data.last_name }}</div>
<div class="status-role" :class="data.status">
{{ $t(data.status) }} {{ data.role.name }}
</div>
<div class="status-role" :class="data.status">{{ $t(data.status) }} {{ data.role.name }}</div>
<div class="email">{{ data.email }}</div>
</div>
</div>
@@ -64,9 +62,8 @@ export default defineComponent({
const avatarSrc = computed(() => {
if (data.value === null) return null;
return data.value.avatar?.data?.thumbnails?.find(
(thumbnail) => thumbnail.key === 'directus-medium-crop'
)?.url;
return data.value.avatar?.data?.thumbnails?.find((thumbnail) => thumbnail.key === 'directus-medium-crop')
?.url;
});
const active = ref(false);
@@ -93,14 +90,7 @@ export default defineComponent({
try {
const response = await api.get(`/${currentProjectKey}/users/${props.user}`, {
params: {
fields: [
'first_name',
'last_name',
'avatar.data',
'role.name',
'status',
'email',
],
fields: ['first_name', 'last_name', 'avatar.data', 'role.name', 'status', 'email'],
},
});
data.value = response.data.data;

View File

@@ -1,11 +1,6 @@
<template>
<div class="private-view" :class="{ theme, dragging }">
<aside
role="navigation"
aria-label="Module Navigation"
class="navigation"
:class="{ 'is-open': navOpen }"
>
<aside role="navigation" aria-label="Module Navigation" class="navigation" :class="{ 'is-open': navOpen }">
<module-bar />
<div class="module-nav alt-colors">
<project-chooser />
@@ -16,15 +11,8 @@
</div>
</aside>
<div class="content" ref="contentEl">
<header-bar
:title="title"
@toggle:drawer="drawerOpen = !drawerOpen"
@toggle:nav="navOpen = !navOpen"
>
<template
v-for="(_, scopedSlotName) in $scopedSlots"
v-slot:[scopedSlotName]="slotData"
>
<header-bar :title="title" @toggle:drawer="drawerOpen = !drawerOpen" @toggle:nav="navOpen = !navOpen">
<template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
<slot :name="scopedSlotName" v-bind="slotData" />
</template>
</header-bar>
@@ -112,14 +100,7 @@ export default defineComponent({
provide('main-element', contentEl);
const {
onDragEnter,
onDragLeave,
onDrop,
onDragOver,
showDropEffect,
dragging,
} = useFileUpload();
const { onDragEnter, onDragLeave, onDrop, onDragOver, showDropEffect, dragging } = useFileUpload();
useEventListener(window, 'dragenter', onDragEnter);
useEventListener(window, 'dragover', onDragOver);
@@ -174,9 +155,7 @@ export default defineComponent({
event.preventDefault();
dragCounter.value++;
const isDropzone =
event.target &&
(event.target as HTMLElement).getAttribute?.('data-dropzone') === '';
const isDropzone = event.target && (event.target as HTMLElement).getAttribute?.('data-dropzone') === '';
if (
dragCounter.value === 1 &&
@@ -205,10 +184,7 @@ export default defineComponent({
disableDropEffect();
}
if (
event.target &&
(event.target as HTMLElement).getAttribute?.('data-dropzone') === ''
) {
if (event.target && (event.target as HTMLElement).getAttribute?.('data-dropzone') === '') {
enableDropEffect();
dragCounter.value = 1;
}
@@ -241,8 +217,7 @@ export default defineComponent({
});
await uploadFiles(files, (progress) => {
const percentageDone =
progress.reduce((val, cur) => (val += cur)) / progress.length;
const percentageDone = progress.reduce((val, cur) => (val += cur)) / progress.length;
const total = files.length;
const done = progress.filter((p) => p === 100).length;

View File

@@ -1,11 +1,5 @@
<template>
<v-menu
v-if="project"
show-arrow
placement="bottom-start"
close-on-content-click
:disabled="projects.length <= 1"
>
<v-menu v-if="project" show-arrow placement="bottom-start" close-on-content-click :disabled="projects.length <= 1">
<template #activator="{ toggle }">
<div class="project-chooser" @click="toggle">
<div class="public-view-logo" v-if="project && project.logo">

View File

@@ -30,21 +30,18 @@ const mockProject: ProjectWithKey = {
database: 'mysql',
project_name: 'Thumper',
project_logo: {
full_url:
'http://localhost:8080/uploads/my-project/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
full_url: 'http://localhost:8080/uploads/my-project/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
url: '/uploads/my-project/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
asset_url: '/uploads/my-project/assets/abc',
},
project_color: '#4CAF50',
project_foreground: {
full_url:
'http://localhost:8080/uploads/my-project/originals/f28c49b0-2b4f-571e-bf62-593107cbf2ec.svg',
full_url: 'http://localhost:8080/uploads/my-project/originals/f28c49b0-2b4f-571e-bf62-593107cbf2ec.svg',
url: '/uploads/my-project/originals/f28c49b0-2b4f-571e-bf62-593107cbf2ec.svg',
asset_url: '/uploads/my-project/assets/abc',
},
project_background: {
full_url:
'http://localhost:8080/uploads/my-project/originals/03a06753-6794-4b9a-803b-3e1cd15e0742.jpg',
full_url: 'http://localhost:8080/uploads/my-project/originals/03a06753-6794-4b9a-803b-3e1cd15e0742.jpg',
url: '/uploads/my-project/originals/03a06753-6794-4b9a-803b-3e1cd15e0742.jpg',
asset_url: '/uploads/my-project/assets/abc',
},