Skip to content

Commit

Permalink
Merge pull request #1729 from ProcessMaker/epic/FOUR-18012
Browse files Browse the repository at this point in the history 
[EPIC FOUR-18012] Screen Template V2 Implementation
  • Loading branch information
@ryancooley
ryancooley authored Oct 9, 2024
2 parents dbbb1d7 + 1623f9a commit 8325b62
Show file tree
Hide file tree
Showing 7 changed files with 708 additions and 37 deletions.
8 changes: 7 additions & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
<screen-toolbar
@undo="$refs.builder.undo()"
@redo="$refs.builder.redo()"
@open-templates="openTemplatesPanel"
@open-calc="openComputedProperties"
@open-customCss="openCustomCSS"
@open-watchers="openWatchersPopup"
Expand Down Expand Up @@ -443,7 +444,9 @@ export default {
minimap: {
enabled: false
}
}
},
showTemplatesPanel: false,
sharedTemplatesData: null,
};
},
computed: {
Expand Down Expand Up @@ -696,6 +699,9 @@ export default {
openWatchersPopup() {
this.$refs.watchersPopup.show();
},
openTemplatesPanel() {
this.$refs.builder.openTemplatesPanel();
},
openComputedProperties() {
this.$refs.computedProperties.show();
},
Expand Down
21 changes: 21 additions & 0 deletions src/components/CssIcon.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<template>
<svg width="58" height="58" viewBox="0 0 71 77" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="34.9456" y="16.7" width="31.6" height="59.6" rx="1.8" fill="#EAF2FF" stroke="#E9ECF1" stroke-width="0.4"/>
<rect x="38.1" y="21.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
<rect x="38.1" y="28.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
<rect x="38.1" y="35.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
<rect x="0.945605" y="16.7" width="31.6" height="59.6" rx="1.8" fill="#EAF2FF" stroke="#E9ECF1" stroke-width="0.4"/>
<rect x="3.84561" y="20.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
<rect x="3.84561" y="27.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
<rect x="3.84561" y="34.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
<rect x="3.84561" y="41.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
<rect x="3.84561" y="48.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
<rect x="1.2" y="0.2" width="65.6" height="13.1882" rx="1.8" fill="#81AFFF" stroke="#E9ECF1" stroke-width="0.4"/>
</svg>
</template>

<script>
export default {
name: "CssIcon",
};
</script>
257 changes: 257 additions & 0 deletions src/components/ScreenTemplateCard.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
<template>
<div>
<b-card
img-top
class="mb-2 screenbuilder-template-card"
@click="showDetails"
>
<div
v-if="thumbnail"
class="thumbnail-container thumbnail-image-container"
>
<img class="thumbnail-image" :src="thumbnail" :alt="`${template.name}`"/>
</div>
<div
v-else
class="thumbnail-container thumbnail-icon-container d-flex align-items-center justify-content-center"
>
<i class="p-4 fas fa-palette thumbnail-icon"></i>
</div>
<hr class="card-divider">
<b-card-body class="p-1">
<div class="template-details">
<span class="template-name d-block pt-1">{{ template.name }}</span>
<span class="template-description d-block">{{ template.description }}</span>
</div>
<b-collapse v-model="showApplyOptions">
<b-form-checkbox-group
class="apply-options-group p-2"
v-model="selected"
name="apply-options"
>
<div class="row row-cols-3 icons-row">
<div
v-for="option in applyOptions"
:key="option.value"
class="col apply-options-container d-flex align-items-baseline flex-column"
>
<div class="icon-container">
<div v-if="option.value === 'CSS'">
<css-icon />
</div>
<div v-else>
<i :class="option.icon"></i>
</div>
</div>
<b-form-checkbox
class="option-checkbox"
:value="option.value"
>
{{ option.text }}
</b-form-checkbox>
</div>
</div>
</b-form-checkbox-group>
<hr class="bottom-card-divider">
<div class="apply-btn-container d-flex justify-content-end">
<button
type="button"
size="sm"
class="btn btn-outline-secondary card-btn"
@click="onCancel"
>
{{ $t("Cancel") }}
</button>
<button
:disabled="!selected.length"
type="button"
size="sm"
class="btn btn-primary ml-2 card-btn"
@click="applyTemplate"
>
{{ $t("Apply") }}
</button>
</div>
</b-collapse>
</b-card-body>
</b-card>

</div>
</template>

<script>
import CssIcon from './CssIcon.vue';
export default {
components: {
CssIcon,
},
mixins: [],
props: ['template', 'screenId', 'currentScreenPage'],
data() {
return {
showApplyOptions: false,
selected: [],
applyOptions: [
{ text: 'CSS', value: 'CSS' },
{ text: 'Fields', value: 'Fields', icon: 'fp-fields-icon' },
{ text: 'Layout', value: 'Layout', icon: 'fp-layout-icon' },
],
};
},
computed: {
thumbnail() {
if (this.template?.template_media && this.template.template_media.length > 0) {
return this.template.template_media[0].url;
} else if (this.template?.template_media?.thumbnail?.url) {
return this.template?.template_media.thumbnail.url
}
return null;
},
},
mounted() {
},
methods: {
showDetails() {
this.showApplyOptions = !this.showApplyOptions;
},
applyTemplate() {
ProcessMaker.apiClient
.post(`/template/screen/${this.template.id}/apply`, {
screenId: this.screenId,
templateOptions: this.selected,
currentScreenPage: this.currentScreenPage,
})
.then((response) => {
ProcessMaker.alert(this.$t("The template options have been applied."), "success");
window.location.reload();
})
.catch((error) => {
const errorMessage = error.response?.data?.message || error.message;
ProcessMaker.alert(errorMessage, "danger");
});
},
onCancel() {
this.showApplyOptions = false;
this.selected = [];
}
},
};
</script>
<style lang="scss" scoped>
.fp-fields-icon, .fp-layout-icon {
color: #EAF2FF;
}
.screenbuilder-template-card {
width: 225px;
margin: 8px;
border: 1px solid #D7DDE5;
border-radius: 8px;
box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.card-divider {
width: 100%;
margin: 0px;
background-color: #D7DDE5;
}
.thumbnail-container:hover,
.thumbnail-container.active {
border-color: #1572C2;
cursor: pointer;
}
.thumbnail-image {
width: 100%;
border-radius: 8px 8px 0px 0px;
}
.thumbnail-image-container {
border-radius: 8px;
padding: 0px !important;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.thumbnail-icon {
color: #CDDDEE;
font-size: 59px;
}
.template-details {
padding: 10px;
}
.template-name {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: #2F343B;
}
.template-description {
font-size: 12.5px;
font-weight: 400;
line-height: 18px;
color: #4E5663;
}
.apply-options-group {
display: flex;
align-items: center;
justify-content: space-between;
}
.icons-row {
margin-right: -5px !important;
margin-left: -5px !important;
}
.apply-options-container {
padding: 5px;
}
.apply-options-group i {
display: block;
font-size: 58px;
}
.icon-container {
display: flex;
align-items: center;
justify-content: center;
width: 66px;
height: 76px;
border: 0.7px solid #D7DDE5;
border-radius: 8px;
margin-bottom: 10px;
}
.option-checkbox {
font-size: 12px;
}
.bottom-card-divider {
width: 90%;
background-color: #E9ECF1;
margin-top: 0px;
}
.apply-btn-container {
padding: 0px 10px 10px 0px;
}
.card-btn {
font-size: 14px;
text-transform: none;
border-radius: 8px;
padding: 5px 10px;
}
</style>
Loading

0 comments on commit 8325b62

Please sign in to comment.