Skip to content

Commit

Permalink
add excel docx and pdf viewer for files
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerrykuku
jerrykuku committed Jan 11, 2024
1 parent d476b27 commit 47a9e51
Show file tree
Hide file tree
Showing 33 changed files with 567 additions and 417 deletions.
6 changes: 6 additions & 0 deletions main/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@
"@tiptap/pm": "^2.0.4",
"@tiptap/starter-kit": "^2.0.4",
"@tiptap/vue-2": "^2.0.4",
"@vue-office/docx": "^1.6.0",
"@vue-office/excel": "^1.6.0",
"@vue-office/pdf": "^1.6.0",
"@vueuse/components": "^10.2.1",
"@vueuse/core": "^10.2.1",
"apexcharts": "^3.41.0",
Expand All @@ -38,10 +41,12 @@
"composerize": "^1.2.0",
"dateformat": "^5.0.3",
"dayjs": "^1.11.9",
"docx-preview": "^0.3.0",
"dompurify": "^3.0.6",
"file-saver": "^2.0.5",
"gsap": "^3.12.2",
"hitbox-js": "^1.0.2",
"hls.js": "^1.4.14",
"iconfonts-casaos": "^1.0.4",
"intersection-observer": "^0.12.2",
"is-valid-hostname": "^1.0.2",
Expand Down Expand Up @@ -74,6 +79,7 @@
"vue-breakpoint-mixin": "^1.5.0",
"vue-codemirror": "^4.0.6",
"vue-custom-scrollbar": "^1.4.4",
"vue-demi": "0.14.6",
"vue-dompurify-html": "2.6.0",
"vue-ellipse-progress": "^1.3.1",
"vue-fullscreen": "^2.6.2",
Expand Down
2 changes: 1 addition & 1 deletion main/src/assets/scss/common/_animate.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,4 +151,4 @@
.slide-prev-enter-active,
.slide-prev-leave-active {
transition-duration: 0.35s;
}
}
1 change: 1 addition & 0 deletions main/src/assets/scss/common/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@
}

.app-card {
aspect-ratio: 1 / 1;
.loading-background {
background: none !important;
border-radius: $backDropBorderRadius;
Expand Down
13 changes: 10 additions & 3 deletions main/src/assets/scss/components/_filebrowser.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,15 @@
justify-content: center;
}

.doc-container {
padding: 0;
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
}

.pdf-container {
padding: 0 13%;
width: 100%;
Expand All @@ -340,9 +349,7 @@
max-height: calc(100% - 8.25rem);
}

&.video {
max-height: calc(100% - 9.875rem);
}


@media (orientation: landscape) {
&.video {
Expand Down
2 changes: 1 addition & 1 deletion main/src/components/Apps/AppCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="common-card is-flex is-align-items-center is-justify-content-center p-55 app-card"
<div class="common-card is-flex is-align-items-center is-justify-content-center app-card"
@mouseleave="hover = true" @mouseover="hover = true">

<!-- Action Button Start -->
Expand Down
23 changes: 12 additions & 11 deletions main/src/components/Apps/AppPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@
<h3 class="title is-5 has-text-weight-normal">{{ $t('Community Apps') }}</h3>
<h3 class="subtitle is-7 has-text-grey-light">
{{
$t('From community contributors, not optimized for CasaOS, but provides a basic App experience.')
$t('From community contributors, not optimized for CasaOS, but provides a basic App nexperience.')
}}
</h3>
Expand Down Expand Up @@ -424,7 +424,6 @@ import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import AppsInstallationLocation from "@/components/Apps/AppsInstallationLocation";
import business_ShowNewAppTag from "@/mixins/app/Business_ShowNewAppTag";
import business_OpenThirdApp from "@/mixins/app/Business_OpenThirdApp";
import DockerProgress from "@/components/Apps/progress.js";
import ComposeConfig from "@/components/Apps/ComposeConfig.vue";
import AppDetailInfo from '@/components/Apps/AppDetailInfo.vue'
import { ValidationObserver, ValidationProvider } from "vee-validate";
Expand Down Expand Up @@ -622,7 +621,6 @@ export default {
storage_item_scence: 'select installation location',
isFirstInstall: false,
installationLocation: '',
dockerProgress: null,
totalPercentage: 0,
installedList: [],
counterPatchGetStoreList: 0,
Expand Down Expand Up @@ -1421,17 +1419,11 @@ export default {

if (!resData.finished) {
this.currentInstallAppError = !resData.success;

if (resData.success) {
this.currentInstallAppType = resData.type;

if (resData.message !== "") {
const messageArray = resData.message.split(/[(\r\n)\r\n]+/).filter(item => item);

messageArray.forEach(item => {
const evt = JSON.parse(item);
this.totalPercentage = this.dockerProgress.getProgress(evt);
});
this.totalPercentage = Number(resData.message);

if (this.totalPercentage === 0) {
this.currentInstallAppText = 'Starting installation';
Expand Down Expand Up @@ -1478,7 +1470,6 @@ export default {
this.currentSlide = 2;
this.currentInstallAppText = "Start Installation..."
this.cancelButtonText = 'Continue in background'
this.dockerProgress = new DockerProgress();
},
"app:install-end"(res) {
this.installAppProgress({
Expand All @@ -1496,6 +1487,16 @@ export default {
message: res.Properties["message"]
});
},
"app:install-progress"(res) {
this.installAppProgress({
finished: false,
name: res.Properties["app:name"],
id: res.Properties["docker:container:id"],
success: true,
type: "pull",
message: res.Properties["app:progress"]
});
},
"docker:image:pull-progress"(res) {
this.installAppProgress({
finished: false,
Expand Down
113 changes: 32 additions & 81 deletions main/src/components/Apps/AppSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
<!-- Title Bar Start -->
<div class="is-flex is-align-items-center mb-4">
<app-section-title-tip id="appTitle1" class="is-flex-grow-1 has-text-sub-04" label="Drag icons to sort."
title="Apps">
title="Apps">
</app-section-title-tip>

<b-dropdown animation="fade1" aria-role="menu" class="file-dropdown" position="is-bottom-left">
<template #trigger>
<b-icon class="polymorphic is-clickable has-text-grey-100" icon="plus-outline" pack="casa"
size="is-24"></b-icon>
size="is-24"></b-icon>
</template>
<b-dropdown-item aria-role="menuitem" @click="showInstall(0, 'custom')">
{{ $t('Custom Install APP') }}
Expand All @@ -22,22 +22,18 @@
<!-- Title Bar End -->

<!-- App List Start -->
<draggable v-model="appList" :draggable="draggable"
class="columns is-variable is-2 is-multiline app-list contextmenu-canvas" tag="div"
v-bind="dragOptions"
@end="onSortEnd" @start="drag = true">
<draggable v-model="appList" :draggable="draggable" class="app-list contextmenu-canvas" tag="div"
v-bind="dragOptions" @end="onSortEnd" @start="drag = true">

<!-- App Icon Card Start -->
<template v-if="!isLoading">
<div v-for="(item) in appList" :id="'app-' + item.name" :key="'app-' + item.name"
class="column is-narrow is-3 handle">
<div v-for="(item) in appList" :id="'app-' + item.name" :key="'app-' + item.name" class="handle">
<app-card :item="item" @configApp="showConfigPanel" @importApp="showContainerPanel"
@updateState="getList"></app-card>
@updateState="getList"></app-card>
</div>
</template>
<template v-else>
<div v-for="(index) in skCount" :id="'app-' + index" :key="'app-' + index"
class="column is-narrow is-3 handle">
<div v-for="(index) in skCount" :id="'app-' + index" :key="'app-' + index" class="handle">
<app-card-skeleton :index="index"></app-card-skeleton>
</div>
</template>
Expand All @@ -50,18 +46,17 @@
<!-- Title Bar Start -->
<div class="title-bar is-flex is-align-items-center mt-2rem mb-5">
<app-section-title-tip id="appTitle2" class="is-flex-grow-1 has-text-sub-04" label="To be rebuilt."
title="Legacy app (To be rebuilt).">
title="Legacy app (To be rebuilt).">
</app-section-title-tip>
</div>
<!-- Title Bar End -->

<!-- App List Start -->
<div class="columns is-variable is-2 is-multiline app-list contextmenu-canvas">
<!-- Application not imported Start -->
<div v-for="(item) in oldAppList" :id="'app-' + item.name" :key="'app-' + item.name"
class="column is-narrow is-3">
<div v-for="(item) in oldAppList" :id="'app-' + item.name" :key="'app-' + item.name" class="handle">
<app-card :isCasa="false" :item="item" @configApp="showConfigPanel" @importApp="showContainerPanel"
@updateState="getList"></app-card>
@updateState="getList"></app-card>
</div>
<!-- Application not imported End -->
</div>
Expand All @@ -72,20 +67,20 @@
</template>

<script>
import AppCard from './AppCard.vue'
import AppCardSkeleton from './AppCardSkeleton.vue';
import AppPanel from './AppPanel.vue'
import ExternalLinkPanel from "@/components/Apps/ExternalLinkPanel";
import AppSectionTitleTip from './AppSectionTitleTip.vue'
import draggable from 'vuedraggable'
import xor from 'lodash/xor'
import concat from 'lodash/concat'
import events from '@/events/events';
import last from 'lodash/last';
import AppCard from './AppCard.vue'
import AppCardSkeleton from './AppCardSkeleton.vue';
import AppPanel from './AppPanel.vue'
import ExternalLinkPanel from "@/components/Apps/ExternalLinkPanel";
import AppSectionTitleTip from './AppSectionTitleTip.vue'
import draggable from 'vuedraggable'
import xor from 'lodash/xor'
import concat from 'lodash/concat'
import events from '@/events/events';
import last from 'lodash/last';
import business_ShowNewAppTag from "@/mixins/app/Business_ShowNewAppTag";
import business_LinkApp from "@/mixins/app/Business_LinkApp";
import isEqual from "lodash/isEqual";
import {ice_i18n} from "@/mixins/base/common-i18n";
import business_LinkApp from "@/mixins/app/Business_LinkApp";
import isEqual from "lodash/isEqual";
import { ice_i18n } from "@/mixins/base/common-i18n";
const SYNCTHING_STORE_ID = 74
Expand Down Expand Up @@ -480,7 +475,7 @@ export default {
// business :: scroll to last position
let name = last(this.newAppIds);
let showEl = document.getElementById("app-" + name)
showEl && showEl.scrollIntoView({behavior: "smooth", block: 'end'});
showEl && showEl.scrollIntoView({ behavior: "smooth", block: 'end' });
},
messageBusToast(message, type) {
Expand Down Expand Up @@ -561,63 +556,19 @@ export default {
<style lang="scss" scoped>
.app-list {
position: relative;
}
@media screen and (max-width: 480px) {
.app-list {
display: flex;
.column {
flex: none;
width: 50%;
}
}
}
@media screen and (max-width: $tablet) {
.app-list {
display: flex;
.column {
flex: none;
width: 50%;
}
}
}
@media screen and (min-width: $tablet) {
.app-list {
.column {
flex: none;
width: 50%;
}
}
}
display: grid;
gap: 1rem;
@media screen and (min-width: $desktop) {
.app-list {
.column {
flex: none;
width: 33.333333%;
}
@include touch {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
@media screen and (min-width: $widescreen) {
.app-list {
.column {
flex: none;
width: 25%;
}
@include desktop {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
}
@media screen and (min-width: $fullhd) {
.app-list {
.column {
flex: none;
width: 20%;
}
@include fullhd {
grid-template-columns: repeat(5, minmax(0, 1fr))
}
}
</style>
2 changes: 1 addition & 1 deletion main/src/components/Apps/TipEditorModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<!-- Modal-Card Header Start -->
<header class="modal-card-head">
<div class="is-flex-grow-1">
<h3 class="title is-3">{{ $t('Tips') }}</h3>
<h3 class="title is-header">{{ $t('Tips') }}</h3>
</div>
<div>
<div class="is-flex is-align-items-center">
Expand Down
18 changes: 0 additions & 18 deletions main/src/components/ContactBar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
<!--
* @LastEditors: Jerryk [email protected]
* @LastEditTime: 2023-03-01 11:38:47
* @FilePath: /CasaOS-UI/src/components/ContactBar.vue
* @Description:
*
* Copyright (c) 2022 by IceWhale, All Rights Reserved.
-->

<template>
<div class="contact-bar is-flex is-align-items-center has-text-white">

Expand Down Expand Up @@ -138,15 +129,6 @@ export default {
font-weight: 400;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
@media screen and (max-width: 480px) {
.contact-bar {
Expand Down
Loading

0 comments on commit 47a9e51

Please sign in to comment.