Skip to content

Commit 6d059df

Browse files
stepanenko3stepanenko3
committed
WIP
1 parent 86413cd commit 6d059df

File tree

10 files changed

+119
-217
lines changed

10 files changed

+119
-217
lines changed

‎dist/js/field.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/tool.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/field/DetailField.vue

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
11
<template>
2-
<div>
3-
<template v-if="field.value">
4-
<PanelItem v-if="display == 'normal'" :field="field" />
5-
<ImagePanel v-else :field="field" />
6-
</template>
2+
<template v-if="field.value">
3+
<PanelItem v-if="display == 'normal'" :index="index" :field="field" />
4+
<PanelItem v-else :index="index" :field="field">
5+
<template #value>
6+
<DetailView :field="field" />
7+
</template>
8+
</PanelItem>
9+
</template>
710

8-
<template v-else>
9-
<PanelItem :field="field" />
10-
</template>
11-
</div>
11+
<template v-else>
12+
<PanelItem :index="index" :field="field" />
13+
</template>
1214
</template>
1315

1416
<script>
15-
import ImagePanel from './custom/ImagePanel';
17+
import DetailView from '../modules/DetailView'
1618
1719
export default {
1820
props: ['resource', 'resourceName', 'resourceId', 'field'],
1921
2022
components: {
21-
ImagePanel: ImagePanel,
23+
DetailView: DetailView,
2224
},
2325
2426
data: () => ({
2527
display: 'normal',
2628
}),
2729
2830
mounted() {
29-
this.display = this.field.display || 'normal';
31+
this.display = this.field.displayDetail || this.field.display || 'normal';
3032
},
3133
};
3234
</script>

‎resources/js/field/FormField.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@
9292
import RenameModal from '../modals/RenameModal';
9393
9494
import UploadProgress from '../components/UploadProgress';
95-
import ImageDetail from '../modules/ImageDetail';
9695
import FileSelect from './custom/FileSelect';
9796
9897
import api from '../api';
@@ -103,7 +102,6 @@
103102
components: {
104103
FileSelect: FileSelect,
105104
UploadProgress: UploadProgress,
106-
ImageDetail: ImageDetail,
107105
108106
FilemanagerModal: FilemanagerModal,
109107
CreateFolderModal: CreateFolderModal,

‎resources/js/field/IndexField.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@
1212
class="w-8 h-8"
1313
:class="{ 'rounded-full': field.rounded, rounded: !field.rounded }"
1414
/>
15-
<div v-else v-html="field.image" class="svg-icon"></div>
15+
<div
16+
v-else
17+
v-html="field.image"
18+
class="svg-icon"
19+
></div>
1620
</template>
1721
<template v-else>
1822
<span class="pl-2">&mdash;</span>
@@ -30,7 +34,7 @@
3034
}),
3135
3236
mounted() {
33-
this.display = this.field.display || 'normal';
37+
this.display = this.field.displayIndex || this.field.display || 'normal';
3438
},
3539
};
3640
</script>

‎resources/js/field/custom/ImagePanel.vue

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎resources/js/modals/DetailModal.vue

Lines changed: 4 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -18,53 +18,7 @@
1818
</ModalHeader>
1919

2020
<div class="flex flex-col md:flex-row">
21-
<div
22-
class="w-full md:w-3/5 flex-shrink-0 flex items-center justify-center"
23-
style="min-height: 400px"
24-
>
25-
<template v-if="info.type == 'image'">
26-
<img class="h-full w-full" :src="info.image" style="object-fit: contain" />
27-
</template>
28-
29-
<template v-else-if="info.type == 'audio'">
30-
<audio ref="audio" controls>
31-
<source :src="info.src" :type="info.mime" />
32-
</audio>
33-
</template>
34-
35-
<template v-else-if="info.type == 'video'">
36-
<video ref="video" controls crossorigin playsinline>
37-
<source :src="info.url" :type="info.mime" />
38-
</video>
39-
</template>
40-
41-
<template v-else-if="info.type == 'text'">
42-
<pre class="p-4" v-if="codeLoaded"><code
43-
ref="code"
44-
v-html="info.source"
45-
></code></pre>
46-
</template>
47-
48-
<!-- <template v-else-if="info.type == 'zip'">
49-
<TreeView
50-
v-if="zipLoaded"
51-
:json="info.source"
52-
:name="info.name"
53-
></TreeView>
54-
</template> -->
55-
56-
<template v-else-if="info.type == 'pdf'">
57-
<object :data="info.url" type="application/pdf" width="100%" height="100%">
58-
<iframe :src="info.url" width="100%" height="100%" style="border: none">
59-
<object class="no-preview" v-html="info.image"></object>
60-
</iframe>
61-
</object>
62-
</template>
63-
64-
<template v-else>
65-
<Icon :type="mimeIcons[info.mime] || mimeIcons.text" width="64" height="64" />
66-
</template>
67-
</div>
21+
<DetailView class="w-full md:w-3/5 flex-shrink-0 " :field="info" />
6822
<div class="w-full md:w-2/5 p-4 bg-gray-100 dark:bg-gray-900">
6923
<div class="w-full mb-2">
7024
<div class="mb-1">{{ __('Name') }}:</div>
@@ -228,6 +182,7 @@
228182
import api from '../api';
229183
import MimeIconsEnum from '../tools/MimeIconsEnum'
230184
import ConfirmationButton from '../components/ConfirmationButton'
185+
import DetailView from '../modules/DetailView'
231186
232187
export default {
233188
props: {
@@ -256,6 +211,7 @@
256211
257212
components: {
258213
ConfirmationButton: ConfirmationButton,
214+
DetailView: DetailView,
259215
},
260216
261217
emits: ['refresh', 'closePreview', 'rename', 'selectFile'],
@@ -264,7 +220,6 @@
264220
return {
265221
loaded: false,
266222
currentInfo: {},
267-
codeLoaded: false,
268223
zipLoaded: false,
269224
cmOptions: {
270225
tabSize: 2,
@@ -409,8 +364,7 @@
409364
410365
if (type == 'text') {
411366
this.$nextTick(function () {
412-
this.cmOptions.mode = this.info.mime;
413-
this.codeLoaded = true;
367+
//
414368
});
415369
}
416370
@@ -427,7 +381,6 @@
427381
});
428382
}
429383
430-
this.codeLoaded = false;
431384
this.zipLoaded = false;
432385
},
433386

‎resources/js/modules/DetailView.vue

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div class="flex items-center justify-center" :class="class" style="min-height: 400px">
3+
<template v-if="field.type == 'image'">
4+
<img class="h-full w-full" :src="field.image" style="object-fit: contain" />
5+
</template>
6+
7+
<template v-else-if="field.type == 'audio'">
8+
<audio ref="audio" controls>
9+
<source :src="field.src" :type="field.mime" />
10+
</audio>
11+
</template>
12+
13+
<template v-else-if="field.type == 'video'">
14+
<video ref="video" controls crossorigin playsinline>
15+
<source :src="field.url" :type="field.mime" />
16+
</video>
17+
</template>
18+
19+
<template v-else-if="field.type == 'text'">
20+
<pre class="p-4"><code
21+
ref="code"
22+
v-html="field.source"
23+
></code></pre>
24+
</template>
25+
26+
<!-- <template v-else-if="field.type == 'zip'">
27+
<TreeView
28+
v-if="zipLoaded"
29+
:json="field.source"
30+
:name="field.name"
31+
></TreeView>
32+
</template> -->
33+
34+
<template v-else-if="field.type == 'pdf'">
35+
<object :data="field.url" type="application/pdf" width="100%" height="100%">
36+
<iframe :src="field.url" width="100%" height="100%" style="border: none">
37+
<object class="no-preview" v-html="field.image"></object>
38+
</iframe>
39+
</object>
40+
</template>
41+
42+
<template v-else>
43+
<Icon :type="mimeIcons[field.mime] || mimeIcons.text" width="64" height="64" />
44+
</template>
45+
</div>
46+
</template>
47+
48+
<script>
49+
import MimeIconsEnum from '../tools/MimeIconsEnum'
50+
51+
export default {
52+
props: {
53+
field: {
54+
type: Object,
55+
required: true,
56+
},
57+
class: {
58+
type: String,
59+
default: '',
60+
required: false,
61+
},
62+
},
63+
64+
data: () => ({
65+
mimeIcons: MimeIconsEnum,
66+
}),
67+
};
68+
</script>

0 commit comments

Comments
 (0)