jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add old post type and possibility to change BG color

Browse Source
This commit is contained in:
Dominic Villemure
2024-10-12 18:10:26 -04:00
parent 006db49cf7
commit ee3b594594
4 changed files with 71 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/contents/ContentEditorPage.vue
View File

@@ -18,6 +18,7 @@ const isSnackbarOpen = ref(false);
const snackbarTimeout = ref(2000);
const snackbarText = ref('');
const snackbarColor = ref('red');
const selectedBackgroundColor = ref('#f0f0f0');
const userStore = useUserProfileStore();
@@ -81,6 +82,13 @@ const saveAsync = async () => {
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title.value}</title>
<style>
body {
background-color: ${selectedBackgroundColor.value};
padding: 20px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
${content.value}
@@ -103,6 +111,47 @@ const saveAsync = async () => {
}
};
const setupTinyMCE = (editor) => {
// Custom button for selecting background color
editor.ui.registry.addButton('myCustomBgColorButton', {
text: 'Page BG Color',
onAction: function () {
editor.windowManager.open({
title: 'Select Page Background Color',
body: {
type: 'panel',
items: [
{
type: 'colorpicker',
name: 'colorpicker',
label: 'Background Color'
}
]
},
buttons: [
{
text: 'Save',
type: 'submit',
primary: true
}
],
onSubmit: function (dialog) {
console.log('supppp');
const color = dialog.getData().colorpicker;
console.log(color);
selectedBackgroundColor.value = color;
// Insert style into TinyMCE's content
const styleTag = `<style>body { background-color: ${color}; }</style>`;
editor.execCommand('mceInsertContent', false, styleTag);
dialog.close(); // Close dialog after selecting color
}
});
}
});
}
</script>
<template>
@@ -130,15 +179,16 @@ const saveAsync = async () => {
:init="{
branding: false,
promotion: false,
plugins: 'lists link emoticons image imagetools code help wordcount media autoresize',
plugins: 'lists link emoticons image imagetools code help wordcount media autoresize textcolor colorpicker',
block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3',
toolbar: 'undo redo image align',
toolbar: 'undo redo image align myCustomBgColorButton',
automatic_uploads: true,
file_picker_types: 'image',
min_height: 600,
max_height: 1200,
images_upload_handler: imagesUploadHandler,
file_picker_callback: filePickerCallback
file_picker_callback: filePickerCallback,
// setup: setupTinyMCE, Possible to change background color of the html
}"
/>
<v-btn @click="saveAsync()">POST</v-btn>

13
src/views/contents/PublishContentButton.vue
View File

@@ -3,15 +3,11 @@ import {useClient} from '@/plugins/api.js';
import {ref} from 'vue';
import {v7} from 'uuid';
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
const props = defineProps({
creator: {type: Object, required: true},
});
import {useBrandingStore} from "@/stores/brandingStore.js";
const emits = defineEmits(['content-posted'])
const userProfileStore = useUserProfileStore()
const brandingStore = useBrandingStore()
const creatorProfileStore = useCreatorProfileStore()
const isDialogActive = ref(false);
@@ -33,7 +29,7 @@ const removeUrl = (index) => {
async function publishPost() {
const formData = new FormData();
formData.append('id', v7());
formData.append('creatorId', creatorProfileStore.value.id);
formData.append('creatorId', creatorProfileStore.creator.id);
formData.append('title', title.value);
formData.append('description', message.value);
files.value.forEach(file => {
@@ -75,7 +71,6 @@ const closeDialog = () => {
<template>
<button
v-if="creator && userProfileStore.value && creator.id === userProfileStore.value.id"
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
@click="isDialogActive = true">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
@@ -85,7 +80,7 @@ const closeDialog = () => {
<v-form>
<v-card class="text-center rounded-xl"
:style="{
border: `3px solid ${creator.colors.menu}`
border: `3px solid ${brandingStore.value.colors.menu}`
}">
<v-card-title class="font-medium">

4
src/views/contents/contentcards/NContentCard.vue
View File

@@ -18,7 +18,7 @@
</span>
</div>
<v-menu>
<v-menu v-if="creatorIsCurrentUser">
<template v-slot:activator="{ props }">
<v-btn variant="plain" v-bind="props">
<v-icon>mdi-dots-vertical</v-icon>
@@ -151,7 +151,7 @@
</template>
<script setup>
import {computed, onBeforeMount, onMounted, onUnmounted, ref} from 'vue';
import {computed, onBeforeMount, ref} from 'vue';
import {time_ago} from "@/internal_time_ago.js";
import MessageList from "@/views/messages/MessageList.vue";
import PostMessage from "@/views/messages/PostMessage.vue";

14
src/views/creators/CreatorContent.vue
View File

@@ -1,7 +1,11 @@
<template>
<div class="w-full h-full">
<v-btn class="flex justify-end" @click="createHtmlContent">Create Custom</v-btn>
<v-btn class="flex justify-end" @click="createContent">Create</v-btn>
<div v-if="creatorIsCurrentUser" class="flex space-x-4">
<publish-content-button></publish-content-button>
<v-btn icon @click="createHtmlContent">
<v-icon>mdi-pencil</v-icon>
</v-btn>
</div>
<div v-if="brandingStore.value.loading">
<v-progress-linear indeterminate></v-progress-linear>
</div>
@@ -16,9 +20,15 @@
import {useBrandingStore} from "@/stores/brandingStore.js";
import ContentList from "@/views/contents/ContentList.vue";
import {useRouter} from "vue-router";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import {computed} from "vue";
import {useAuthStore} from "@/stores/authStore.js";
const brandingStore = useBrandingStore()
const authStore = useAuthStore();
const router = useRouter();
const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === brandingStore.value.id);
const createHtmlContent = () => {
router.push('/content/editor');
}