Skip to content

Commit

Permalink
feat: Add application Drawer Selection Drawer - Meeds-io/MIPs#139 (#95)
Browse files Browse the repository at this point in the history
  • Loading branch information
boubaker authored and rdenarie committed Jun 7, 2024
1 parent 4a3039f commit 2ee1686
Show file tree
Hide file tree
Showing 9 changed files with 224 additions and 146 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

-->
<template>
<v-hover v-model="hover" :disabled="!illustrationId">
<v-hover v-model="hover" :disabled="noHover || !illustrationId">
<div
:aria-label="$t(`${objectType}.label.preview`, {0: name})"
class="position-relative full-height full-width d-flex align-center justify-center">
Expand All @@ -35,8 +35,8 @@
</v-expand-transition>
<v-img
:src="illustrationSrc"
max-height="30"
max-width="60"
:max-height="maxHeight"
:max-width="maxWidth"
contain />
</div>
</v-hover>
Expand All @@ -56,6 +56,18 @@ export default {
type: String,
default: null,
},
noHover: {
type: Boolean,
default: false,
},
maxHeight: {
type: String,
default: () => '30',
},
maxWidth: {
type: String,
default: () => '60',
},
},
data: () => ({
hover: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,15 @@
ref="sectionAddDrawer" />
<layout-editor-section-edit-drawer
ref="sectionEditDrawer" />
<layout-editor-application-add-drawer
ref="applicationDrawer" />
<layout-editor-application-edit-drawer
ref="applicationPropertiesDrawer" />
<layout-editor-application-category-select-drawer
ref="applicationCategoryDrawer" />
<layout-editor-application-add-drawer
ref="applicationDrawer" />
<layout-editor-portlet-edit-dialog />
<layout-editor-page-template-drawer />
<layout-image-illustration-preview />
<changes-reminder
ref="changesReminder"
:reminder="reminder"
Expand Down Expand Up @@ -122,7 +125,7 @@ export default {
created() {
this.$root.$on('layout-add-section-drawer', this.addSection);
this.$root.$on('layout-edit-section-drawer', this.editSection);
this.$root.$on('layout-cell-add-application', this.addApplication);
this.$root.$on('layout-add-application-category-drawer', this.openApplicationCategoryDrawer);
this.$root.$on('layout-add-section', this.handleAddSection);
this.$root.$on('layout-remove-section', this.handleRemoveSection);
this.$root.$on('layout-replace-section', this.handleReplaceSection);
Expand Down Expand Up @@ -197,10 +200,13 @@ export default {
this.$refs.sectionEditDrawer.open(parentContainer.children[index], index, parentContainer.children.length);
}
},
addApplication(sectionId, container) {
openApplicationDrawer(applications) {
this.$refs.applicationDrawer.open(applications);
},
openApplicationCategoryDrawer(sectionId, container) {
this.$root.selectedSectionId = sectionId;
this.$root.selectedCells = [container];
this.$refs.applicationDrawer.open();
this.$refs.applicationCategoryDrawer.open();
},
resetCellsSelection() {
window.setTimeout(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,43 +19,56 @@

-->
<template>
<v-card :id="portletName" flat>
<div class="d-flex flex-no-wrap full-width">
<v-avatar
class="ApplicationCardImage mx-1 my-auto"
size="45"
tile>
<v-img
:src="imgSrc"
:alt="portletName"
max-height="45"
max-width="45"
@error="displayDefault = true" />
</v-avatar>
<div class="d-flex flex-column flex-grow-1 ApplicationCardBody text-truncate ms-1 my-auto">
<div
:title="name"
class="text-truncate subtitle-1 px-1 pt-2 text-color ApplicationCardTitle">
<v-hover v-model="hover">
<v-card
:id="`PortletInstance_${application.id}`"
class="border-color card-border-radius overflow-hidden position-relative"
flat>
<v-expand-transition>
<v-card
v-if="hover"
class="d-flex absolute-full-size z-index-one align-center justify-center transition-fast-in-fast-out mask-color"
flat>
<div class="ApplicationCardAction">
<v-btn
:aria-label="$t('layout.add')"
elevation="0"
class="primary mx-2"
@click="$emit('add')">
<v-icon size="13" class="me-2">fa-plus</v-icon>
{{ $t('layout.add') }}
</v-btn>
<v-btn
v-if="illustrationId"
:aria-label="$t('layout.preview')"
elevation="0"
class="primary mx-2 primary-border-color"
outlined
@click="preview">
<v-icon size="13" class="me-2">fa-search</v-icon>
{{ $t('layout.preview') }}
</v-btn>
</div>
</v-card>
</v-expand-transition>
<div class="d-flex flex-column full-width pa-5">
<div class="subtitle-1 text-color ApplicationCardTitle">
{{ name }}
</div>
<v-card-subtitle
:title="description"
class="text-truncate subtitle-2 px-1 pt-0 pb-2 text-sub-title ApplicationCardDescription">
{{ description || name }}
</v-card-subtitle>
</div>
<div class="ApplicationCardAction">
<v-btn
text
height="100%"
width="100%px"
class="primary--text"
@click="$emit('add')">
<v-icon size="36">fa-plus</v-icon>
</v-btn>
<div
v-if="description"
v-sanitized-html="description"
class="subtitle-2 pt-0 pb-2 text-sub-title ApplicationCardDescription"></div>
<layout-image-illustration
ref="illustration"
:value="application"
object-type="portletInstance"
max-height="110"
max-width="100%"
no-hover />
</div>
</div>
</v-card>
</v-card>
</v-hover>
</template>
<script>
export default {
Expand All @@ -66,26 +79,30 @@ export default {
},
},
data: () => ({
displayActionMenu: false,
displayDefault: false,
defaultImageSrc: '/sites/images/application/DefaultPortlet.png',
hover: false,
}),
computed: {
imgSrc() {
return this.displayDefault && this.defaultImageSrc || `/${this.applicationName}/skin/DefaultSkin/portletIcons/${this.portletName}.png`;
},
applicationName() {
return this.application?.applicationName || this.application?.contentId?.split?.('/')?.[0];
},
portletName() {
return this.application?.portletName || this.application?.contentId?.split?.('/')?.[1];
},
name() {
return this.application?.name;
},
description() {
return this.application?.description;
},
instanceId() {
return this.application?.id;
},
illustrationId() {
return this.application?.illustrationId;
},
illustrationSrc() {
return this.illustrationId && `${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/social/attachments/portletInstance/${this.instanceId}/${this.illustrationId}` || this.defaultImageSrc;
},
},
methods: {
preview() {
this.$refs.illustration.openIllustration();
},
},
};
</script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,25 +19,21 @@

-->
<template>
<v-expansion-panel
<v-card
v-if="hasApplications"
class="border-color border-radius mt-4">
<v-expansion-panel-header v-sanitized-html="categoryLabel" />
<v-divider v-if="expanded" />
<v-expansion-panel-content>
<div
v-for="application in categoryApplications"
:key="application.id"
class="d-flex flex-no-wrap justify-space-between border-radius border-color ApplicationCard ApplicationCardEmbedded">
<layout-editor-application-card
:application="application"
class="d-flex flex-grow-1"
@add="$emit('addApplication', application)" />
</div>
</v-expansion-panel-content>
</v-expansion-panel>
class="d-flex flex-column border-color border-radius mt-4 align-center justify-center aspect-ratio-1"
min-width="110px"
width="calc(33% - 8px)"
max-width="120px"
flat
@click="$root.$emit('layout-add-application-drawer', categoryApplications)">
<v-icon class="mt-auto mb-2">{{ categoryIcon }}</v-icon>
<div
v-sanitized-html="categoryLabel"
:title="$utils.htmlToText(categoryLabel)"
class="text-truncate-2 mb-auto subtitle-1 mt-2"></div>
</v-card>
</template>

<script>
export default {
props: {
Expand All @@ -49,6 +45,14 @@ export default {
type: Object,
default: null,
},
parentId: {
type: Object,
default: null,
},
container: {
type: Object,
default: null,
},
applications: {
type: Array,
default: null,
Expand All @@ -61,6 +65,9 @@ export default {
categoryLabel() {
return this.category?.label || this.category?.name;
},
categoryIcon() {
return this.category?.icon;
},
categoryId() {
return this.category?.id;
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
class="full-width"
flat
v-on="!multiSelectEnabled && {
click: () => $root.$emit('layout-cell-add-application', parentId, container)
click: () => $root.$emit('layout-add-application-category-drawer', parentId, container)
}">
<v-card
v-if="isDynamicSection"
Expand Down
Loading

0 comments on commit 2ee1686

Please sign in to comment.