Skip to content

Commit

Permalink
Merge pull request #962 from nextcloud-libraries/fix/use-preview-cont…
Browse files Browse the repository at this point in the history
…roller
  • Loading branch information
skjnldsv authored Aug 27, 2023
2 parents 69ad471 + 968240f commit 237244f
Show file tree
Hide file tree
Showing 9 changed files with 343 additions and 66 deletions.
48 changes: 29 additions & 19 deletions build/extract-l10n.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,33 @@
import { GettextExtractor, JsExtractors } from 'gettext-extractor'
import { GettextExtractor, JsExtractors, HtmlExtractors } from 'gettext-extractor'

let extractor = new GettextExtractor();
const extractor = new GettextExtractor()

extractor
.createJsParser([
JsExtractors.callExpression('t', {
arguments: {
text: 0,
}
}),
JsExtractors.callExpression('n', {
arguments: {
text: 1,
textPlural: 2,
}
}),
])
.parseFilesGlob('./lib/**/*.@(ts|js|vue)');
const jsParser = extractor.createJsParser([
JsExtractors.callExpression('t', {
arguments: {
text: 0,
},
}),
JsExtractors.callExpression('n', {
arguments: {
text: 0,
textPlural: 1,
},
}),
])
.parseFilesGlob('./lib/**/*.@(ts|js)')

extractor.savePotFile('./l10n/messages.pot');
extractor.createHtmlParser([
HtmlExtractors.embeddedJs('*', jsParser),
HtmlExtractors.embeddedAttributeJs(/:[a-z]+/, jsParser),
])
.parseFilesGlob('./lib/**/*.vue')

extractor.printStats();
// remove references to avoid conflicts
extractor.getMessages().forEach((msg) => {
msg.references = []
})

extractor.savePotFile('./l10n/messages.pot')

extractor.printStats()
69 changes: 45 additions & 24 deletions l10n/messages.pot
Original file line number Diff line number Diff line change
Expand Up @@ -2,92 +2,113 @@ msgid ""
msgstr ""
"Content-Type: text/plain; charset=UTF-8\n"

#: lib/components/FilePicker/FilePickerBreadcrumbs.vue:91
msgid "\"{name}\" is an invalid file name."
msgstr ""

#: lib/components/FilePicker/FilePickerBreadcrumbs.vue:93
msgid "\"{name}\" is not an allowed filetype"
msgstr ""

#: lib/components/FilePicker/FilePickerBreadcrumbs.vue:89
msgid "\"/\" is not allowed inside a file name."
msgstr ""

#: lib/components/FilePicker/FilePickerNavigation.vue:57
msgid "All files"
msgstr ""

#: lib/filepicker.ts:207
msgid "Choose"
msgstr ""

#: lib/filepicker.ts:207
msgid "Choose {file}"
msgstr ""

#: lib/filepicker.ts:214
msgid "Copy"
msgstr ""

#: lib/filepicker.ts:214
msgid "Copy to {target}"
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:249
msgid "Could not create the new folder"
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:159
#: lib/components/FilePicker/FilePickerNavigation.vue:65
msgid "Create directory"
msgstr ""

msgid "Current view selector"
msgstr ""

msgid "Favorites"
msgstr ""

#: lib/components/FilePicker/FilePickerBreadcrumbs.vue:87
msgid "File name cannot be empty."
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:235
msgid "Filepicker sections"
msgstr ""

msgid "Files and folders you mark as favorite will show up here."
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:233
msgid "Files and folders you recently modified will show up here."
msgstr ""

#: lib/components/FilePicker/FileList.vue:47
msgid "Filter file list"
msgstr ""

msgid "Home"
msgstr ""

msgid "Mime type {mime}"
msgstr ""

msgid "Modified"
msgstr ""

#: lib/filepicker.ts:222
msgid "Move"
msgstr ""

#: lib/filepicker.ts:222
msgid "Move to {target}"
msgstr ""

#: lib/components/FilePicker/FileList.vue:27
msgid "Name"
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:159
#: lib/components/FilePicker/FilePickerNavigation.vue:61
msgid "New"
msgstr ""

msgid "New folder"
msgstr ""

msgid "New folder name"
msgstr ""

msgid "No files in here"
msgstr ""

msgid "No files matching your filter were found."
msgstr ""

msgid "No matching files"
msgstr ""

msgid "Recent"
msgstr ""

#: lib/components/FilePicker/FileList.vue:8
msgid "Select all entries"
msgstr ""

msgid "Select entry"
msgstr ""

#: lib/components/FilePicker/FileList.vue:37
msgid "Select the row for {nodename}"
msgstr ""

msgid "Size"
msgstr ""

#: lib/toast.ts:242
msgid "Undo"
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:231
msgid "unknown"
msgstr ""

msgid "Upload some content or sync with your devices!"
msgstr ""
22 changes: 6 additions & 16 deletions lib/components/FilePicker/FileListRow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</td>
<td class="row-name">
<div class="file-picker__name-container" data-testid="row-name">
<div class="file-picker__file-icon" :style="{ backgroundImage }" />
<FilePreview :node="node" />
<div class="file-picker__file-name" :title="displayName" v-text="displayName" />
<div class="file-picker__file-extension" v-text="fileExtension" />
</div>
Expand All @@ -35,11 +35,15 @@
</tr>
</template>
<script setup lang="ts">
import { type Node, formatFileSize, FileType } from '@nextcloud/files'
import type { Node } from '@nextcloud/files'
import { formatFileSize, FileType } from '@nextcloud/files'
import { NcCheckboxRadioSwitch, NcDatetime } from '@nextcloud/vue'
import { computed } from 'vue'
import { t } from '../../utils/l10n'
import FilePreview from './FilePreview.vue'
const props = defineProps<{
/** Can directories be picked */
allowPickDirectory: boolean
Expand Down Expand Up @@ -80,11 +84,6 @@ const isDirectory = computed(() => props.node.type === FileType.Folder)
*/
const isPickable = computed(() => props.canPick && (props.allowPickDirectory || !isDirectory.value))
/**
* Background image url for the given nodes mime type
*/
const backgroundImage = computed(() => `url(${window.OC.MimeType.getIconUrl(props.node.mime)})`)
/**
* Toggle the selection state
*/
Expand Down Expand Up @@ -134,15 +133,6 @@ function handleKeyDown(event: KeyboardEvent) {
height: 100%;
}
&__file-icon {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
background-repeat: no-repeat;
background-size: contain;
}
&__file-name {
padding-inline-start: 6px;
min-width: 0;
Expand Down
55 changes: 55 additions & 0 deletions lib/components/FilePicker/FilePreview.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<template>
<div :style="canLoadPreview ? { backgroundImage: `url(${previewURL})`} : undefined"
:aria-label="t('Mime type {mime}', { mime: node.mime || t('unknown') })"
class="file-picker__file-icon">
<template v-if="!canLoadPreview">
<IconFile v-if="isFile" :size="20" />
<IconFolder v-else :size="20" />
</template>
</div>
</template>

<script setup lang="ts">
import { FileType, type Node } from '@nextcloud/files'
import { usePreviewURL } from '../../usables/preview'
import { computed, ref, toRef, watch } from 'vue'
import { t } from '../../utils/l10n'
import IconFile from 'vue-material-design-icons/File.vue'
import IconFolder from 'vue-material-design-icons/Folder.vue'
const props = defineProps<{
node: Node
}>()
const { previewURL } = usePreviewURL(toRef(props, 'node'))
const isFile = computed(() => props.node.type === FileType.File)
const canLoadPreview = ref(false)
watch(previewURL, () => {
canLoadPreview.value = false
if (previewURL.value) {
const loader = document.createElement('img')
loader.src = previewURL.value.href
loader.onerror = () => loader.remove()
loader.onload = () => { canLoadPreview.value = true; loader.remove() }
document.body.appendChild(loader)
}
}, { immediate: true })
</script>

<style scoped lang="scss">
.file-picker__file-icon {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
background-repeat: no-repeat;
background-size: contain;
// for the fallback
display: flex;
justify-content: center;
}
</style>
Loading

0 comments on commit 237244f

Please sign in to comment.