@concretecms/bedrock 1.3.7 → 1.4.0

package/assets/cms/components/Announcement/Modal/Modal.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="modal-dialog modal-dialog-centered">
+        <component
+            :key="slideComponentKey"
+            :is="slideComponent"
+            v-bind="slideComponentProps"
+            @advance-broadcast="advanceSlides"
+            @mark-announcement-as-viewed="markAnnouncementAsViewed"
+        ></component>
+    </div>
+</template>
+<script>
+/* eslint-disable no-new */
+import ConcreteAnnouncementFeatureSlide from '../Slide/FeatureSlide'
+import ConcreteAnnouncementWelcomeSlide from '../Slide/WelcomeSlide'
+import ConcreteAnnouncementCollectSiteInformationSlide from '../Slide/CollectSiteInformationSlide'
+
+export default {
+    components: {
+        ConcreteAnnouncementFeatureSlide,
+        ConcreteAnnouncementWelcomeSlide,
+        ConcreteAnnouncementCollectSiteInformationSlide
+    },
+    props: {
+        handle: {
+            type: String,
+            required: true
+        },
+        totalSlides: {
+            type: Number,
+            required: true,
+            default: 1
+        },
+        slides: {
+            type: Array,
+            required: true
+        }
+    },
+    data: () => ({
+        currentSlide: 0
+    }),
+    computed: {
+        slideComponentKey: function() {
+            return 'slide' + this.currentSlide
+        },
+        slideComponent: function() {
+            return this.slides[this.currentSlide].component
+        },
+        slideComponentProps: function() {
+            const props = this.slides[this.currentSlide].componentProps
+            props.currentSlideInGroup = this.currentSlide
+            props.totalSlidesInGroup = this.totalSlides
+            return props
+        }
+    },
+
+    methods: {
+        markAnnouncementAsViewed() {
+            var my = this
+            new ConcreteAjaxRequest({
+                url: CCM_DISPATCHER_FILENAME + '/ccm/system/announcement/mark_as_viewed/' + my.handle,
+                data: {
+                    ccm_token: CCM_SECURITY_TOKEN
+                }
+            })
+        },
+        advanceSlides() {
+            if ((this.currentSlide + 1) < this.slides.length) {
+                this.currentSlide++
+            } else {
+                // emit it up to the grandparent "Broadcast" component
+                this.$emit('advance-broadcast')
+            }
+        }
+    }
+}
+</script>

package/assets/cms/components/Announcement/Slide/CollectSiteInformationSlide.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="modal-content">
+        <form method="post" @submit="submitForm">
+            <announcement-header title="Tell us a little about your site"></announcement-header>
+            <div class="modal-body">
+                <div class="offset-lg-3 col-lg-9">
+                    <span v-html="survey"></span>
+                </div>
+                <div class="small">
+                    <p>This information will be used to improve your experience. It will never be shared outside of the team building Concrete CMS.</p>
+                    <div><a href="#" target="_blank">Privacy Policy</a></div>
+                </div>
+            </div>
+            <div class="modal-footer d-flex">
+                <button class="btn btn-secondary" type="button" @click="skip">Skip</button>
+                <button class="btn btn-primary ms-auto" type="submit">Send</button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+/* eslint-disable no-new */
+import AnnouncementHeader from '../Header/Header'
+export default {
+    components: {
+        AnnouncementHeader
+    },
+    props: {
+        survey: {
+            type: String,
+            required: true
+        }
+    },
+    data: () => ({
+    }),
+    methods: {
+        skip() {
+            this.$emit('mark-announcement-as-viewed')
+            this.$emit('advance-broadcast')
+        },
+        submitForm(e) {
+            var my = this
+            e.preventDefault()
+            var data = $(this.$el).find('form').serializeArray()
+            data.push({ name: 'ccm_token', value: CCM_SECURITY_TOKEN })
+            new ConcreteAjaxRequest({
+                url: CCM_DISPATCHER_FILENAME + '/ccm/system/announcement/site_information/submit/',
+                data: data,
+                success: function (r) {
+                    // No need to emit the mark-announcement-as-viewed event because this is already handled
+                    // by the backend submit method above.
+                    my.$emit('advance-broadcast')
+                }
+            })
+        }
+    },
+    mounted() {
+    }
+}
+</script>

package/assets/cms/components/Announcement/Slide/FeatureSlide.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="modal-content">
+        <announcement-header :title="title"></announcement-header>
+        <div class="modal-body">
+            <transition-group appear name="concrete-fade" mode="out-in">
+                <announcement-item
+                    :key="'title' + i"
+                    :class="{'mt-4': i > 0}"
+                    v-for="(item, i) in items"
+                    :item="item">
+                </announcement-item>
+            </transition-group>
+        </div>
+        <div class="modal-footer d-flex">
+            <component v-if="button !== null" :key="button.component" :is="button.component"
+                       v-bind="button.componentProps"
+            ></component>
+            <button v-if="hasMoreSlides" class="btn btn-primary ms-auto" @click="next">Next</button>
+            <button v-else class="btn btn-primary ms-auto" @click="done">Done</button>
+        </div>
+    </div>
+</template>
+
+<script>
+/* eslint-disable no-new */
+import AnnouncementHeader from '../Header/Header'
+import AnnouncementItem from '../Item/Item'
+import ConcreteAnnouncementExternalLinkButton from '../Button/ExternalLinkButton'
+
+export default {
+    components: {
+        AnnouncementHeader,
+        AnnouncementItem,
+        ConcreteAnnouncementExternalLinkButton
+    },
+    props: {
+        title: {
+            type: String,
+            required: true
+        },
+        button: {
+            type: Object,
+            required: false
+        },
+        items: {
+            type: Array,
+            required: true
+        },
+        currentSlideInGroup: {
+            type: Number,
+            required: false,
+            default: 0
+        },
+        totalSlidesInGroup: {
+            type: Number,
+            required: false,
+            default: 1
+        }
+    },
+    data: () => ({
+        itemsToDisplay: null
+    }),
+    computed: {
+        hasMoreSlides() {
+            return (this.currentSlideInGroup + 1) < this.totalSlidesInGroup
+        }
+    },
+    methods: {
+        next() {
+            this.$emit('advance-broadcast')
+        },
+        done() {
+            this.$emit('mark-announcement-as-viewed')
+            this.$emit('advance-broadcast')
+        }
+    },
+    mounted() {
+
+    }
+}
+</script>

package/assets/cms/components/Announcement/Slide/WelcomeSlide.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="modal-content">
+        <announcement-header title="Take a few minutes to learn the basics"></announcement-header>
+        <div class="modal-body">
+            <transition appear name="concrete-fade" mode="out-in">
+                <div key="loading" v-if="!Array.isArray(itemsToDisplay)">
+                    <div class="placeholder-wave">
+                        <section>
+                            <span class="placeholder col-4 bg-black"></span>
+                            <span class="placeholder col-10 bg-secondary"></span>
+                            <span class="placeholder col-3 bg-primary"></span>
+                        </section>
+                        <section class="mt-4">
+                            <span class="placeholder col-4 bg-black"></span>
+                            <span class="placeholder col-10 bg-secondary"></span>
+                            <span class="placeholder col-3 bg-primary"></span>
+                        </section>
+                        <section class="mt-4">
+                            <span class="placeholder col-4 bg-black"></span>
+                            <span class="placeholder col-10 bg-secondary"></span>
+                            <span class="placeholder col-3 bg-primary"></span>
+                        </section>
+                    </div>
+                </div>
+                <div v-else key="items">
+                    <announcement-item
+                        :key="i"
+                        :class="{'mt-4': i > 0}"
+                        v-for="(item, i) in itemsToDisplay"
+                        :item="item">
+                    </announcement-item>
+                </div>
+            </transition>
+        </div>
+        <div class="modal-footer d-flex">
+            <button class="btn btn-primary ms-auto" @click="confirm">Got It!</button>
+        </div>
+    </div>
+</template>
+
+<script>
+/* eslint-disable no-new */
+import AnnouncementHeader from '../Header/Header'
+import AnnouncementItem from '../Item/Item'
+
+export default {
+    components: {
+        AnnouncementHeader,
+        AnnouncementItem
+    },
+    props: {
+        items: {
+            type: Array,
+            required: false
+        },
+        itemAccessToken: {
+            type: String,
+            required: true
+        }
+    },
+    data: () => ({
+        itemsToDisplay: null
+    }),
+    methods: {
+        confirm() {
+            this.$emit('mark-announcement-as-viewed')
+            this.$emit('advance-broadcast')
+        }
+    },
+    mounted() {
+        var my = this
+        if (my.items) {
+            this.itemsToDisplay = my.items
+        } else {
+            new ConcreteAjaxRequest({
+                url: `${CCM_DISPATCHER_FILENAME}/ccm/system/dialogs/help/get_items`,
+                data: {
+                    ccm_token: my.itemAccessToken
+                },
+                success: r => {
+                    my.itemsToDisplay = r
+                }
+            })
+        }
+    }
+}
+</script>

package/assets/cms/components/Help/Modal.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="row gx-5 h-100">
+        <div :class="{'border-end': true, 'col-md-6': hasSidebarSlot, 'col-md-12': !hasSidebarSlot}">
+            <slot name="main">
+                <transition-group appear name="concrete-fade" mode="out-in">
+                    <announcement-item
+                        :key="'help' + i"
+                        :class="{'mt-4': i > 0}"
+                        v-for="(item, i) in items"
+                        :indent-if-icon-empty="false"
+                        :item="item">
+                    </announcement-item>
+                </transition-group>
+            </slot>
+        </div>
+        <div class="col-md-6" v-if="hasSidebarSlot">
+            <slot name="sidebar"></slot>
+        </div>
+    </div>
+</template>
+<script>
+import AnnouncementItem from '../Announcement/Item/Item'
+import ConcreteAnnouncementExternalLinkButton from '../Announcement/Button/ExternalLinkButton'
+export default {
+    components: {
+        AnnouncementItem,
+        ConcreteAnnouncementExternalLinkButton
+    },
+    props: {
+        items: {
+            type: Array,
+            required: false,
+            default: []
+        }
+    },
+    data: () => ({
+    }),
+    computed: {
+        hasSidebarSlot() {
+            return !!this.$slots.sidebar
+        }
+    },
+    methods: {
+    },
+    mounted() {
+    }
+}
+</script>

package/assets/cms/components/Image/ThumbnailEditor.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="ccm-image-thumbnail-editor">
+        <cropper
+            ref="cropper"
+            class="ccm-image-thumbnail-editor-cropper"
+            :stencil-props="{
+                handlers: {},
+                movable: true,
+                resizable: false
+            }"
+            :stencil-size="stencilSize"
+            :canvas="canvas"
+            :resize-image="{
+                adjustStencil: false
+            }"
+            image-restriction="fit-area"
+            :src="src"
+        />
+        <div class="ccm-image-thumbnail-editor-controls">
+            <a @click="zoomIn"><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M8 11h3m3 0h-3m0 0V8m0 3v3M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></a>
+            <a @click="zoomOut"><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0zM8 11h6" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></a>
+        </div>
+        <div class="ccm-image-thumbnail-editor-save">
+            <button @click="save" class="btn btn-primary float-end">{{ lang.save }}</button>
+        </div>
+    </div>
+</template>
+<script>
+/* eslint-disable no-new */
+import { Cropper } from 'vue-advanced-cropper'
+import 'vue-advanced-cropper/dist/style.css'
+export default {
+    components: {
+        Cropper
+    },
+    props: {
+        width: {
+            type: Number,
+            required: true
+        },
+        height: {
+            type: Number,
+            required: true
+        },
+        accessToken: {
+            type: String,
+            required: true
+        },
+        lang: {
+            type: Object,
+            required: true
+        },
+        src: {
+            type: String,
+            required: true
+        },
+        uploadUrl: {
+            type: String,
+            required: true
+        }
+    },
+    data: () => ({
+        image: null,
+        saveInProgress: false
+    }),
+    computed: {
+        stencilSize: function() {
+            const stencilSize = {}
+            stencilSize.width = this.width
+            stencilSize.height = this.height
+            return stencilSize
+        },
+        canvas: function() {
+            const canvas = {}
+            canvas.maxWidth = this.width
+            canvas.maxHeight = this.height
+            return canvas
+        }
+    },
+    methods: {
+        zoomIn() {
+            this.$refs.cropper.zoom(1.2)
+        },
+        zoomOut() {
+            this.$refs.cropper.zoom(0.8)
+        },
+        save() {
+            var my = this
+            this.saveInProgress = true
+            const { canvas } = this.$refs.cropper.getResult()
+            if (canvas) {
+                const form = new FormData()
+                form.append('ccm_token', this.accessToken)
+                canvas.toBlob(blob => {
+                    form.append('file', blob)
+                    new ConcreteAjaxRequest({
+                        url: my.uploadUrl,
+                        processData: false,
+                        contentType: false,
+                        dataType: 'json',
+                        data: form,
+                        success: function(r) {
+                            jQuery.fn.dialog.closeTop()
+                            ConcreteAlert.notify({
+                                message: ccmi18n_filemanager.thumbnailImageSaved,
+                                title: ccmi18n_filemanager.thumbnailImages
+                            })
+                        }
+                    })
+                })
+            }
+        }
+    },
+    mounted() {
+    }
+}
+</script>

package/assets/cms/components/RunningProcessList.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div :class="{'card': true, 'card-body': true, 'process-card': true}"
+        <div :class="{'card': format === 'card', 'card-body': format === 'card', 'process-card': format === 'card'}"
         v-for="process in processes" :key="process.id">
             <div class="row">
                 <div class="col-md-9 running-process-name">
@@ -43,6 +43,11 @@ export default {
         processes: {
             type: Array,
             required: true
+        },
+        format: {
+            type: String,
+            required: false,
+            default: 'card' /* card or empty */
         }
     },
     data: () => ({

package/assets/cms/components/customizer/FontFamilyPageCustomizerWidget.vue

@@ -1,13 +1,18 @@
 <template>
-    <select @change="componentUpdated" class="selectpicker" v-model="selectedFont">
-        <option value="" :data-content="'<span>Default</span>'">Default</option>
-        <option v-for="font in customFonts" :value="font" :data-content="'<span style=\'font-family: ' + font + '\'>' + font + '</span>'">{{ font }}</option>
-        <option v-for="font in standardFonts" :value="font" :data-content="'<span style=\'font-family: ' + font + '\'>' + font + '</span>'">{{ font }}</option>
+    <select @change="componentUpdated" v-model="selectedFont">
+        <option value="__default__" data-font="">Default</option>
+        <optgroup label="Theme Fonts">
+            <option v-for="font in customFonts" :data-font="font" :value="font">{{ font }}</option>
+        </optgroup>
+        <optgroup label="Standard Fonts">
+            <option v-for="font in standardFonts" :data-font="font" :value="font">{{ font }}</option>
+        </optgroup>
     </select>
 </template>
 
 <script>
-/* globals WebFont */
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect, WebFont */
 export default {
     components: {},
     data() {
@@ -16,7 +21,16 @@ export default {
         }
     },
     mounted() {
-        $('select.selectpicker').selectpicker()
+        new TomSelect(this.$el, {
+            render: {
+                option: function (data, escape) {
+                    return `<div style="font-family: ${data.font}">${data.text}</div>`
+                },
+                item: function (item, escape) {
+                    return `<div style="font-family: ${item.font}">${item.text}</div>`
+                }
+            }
+        })
         var googleFontFamilies = []
         this.styleValue.style.fonts.forEach(function(font) {
             if (font.type === 'google') {
@@ -33,10 +47,16 @@ export default {
     },
     methods: {
         componentUpdated: function () {
+            var componentUpdatedFontFamily = this.selectedFont
+            if (this.selectedFont == '__default__') {
+                // This is a TomSelect limitation. we want to send an empty string but when
+                // I put an empty string in my value the option doesn't get added to the list.
+                componentUpdatedFontFamily = ''
+            }
             this.$emit('update', {
                 variable: this.styleValue.style.variable,
                 value: {
-                    fontFamily: this.selectedFont
+                    fontFamily: componentUpdatedFontFamily
                 }
             })
         }

package/assets/cms/components/file-manager/Chooser/FileManager.vue

@@ -51,7 +51,6 @@ export default {
             validator: value => ['grid', 'list'].indexOf(value) !== -1
         },
         startFolder: {
-            type: String,
             required: true
         },
         title: {

package/assets/cms/components/file-manager/Chooser/FolderBookmark.vue

@@ -43,7 +43,6 @@ export default {
             validator: value => ['grid', 'list'].indexOf(value) !== -1
         },
         startFolder: {
-            type: String,
             required: true
         },
         title: {

package/assets/cms/components/file-manager/Chooser.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-100">
         <div class="container-fluid h-100">
             <div class="row h-100">
                 <div class="col-4 border-end p-3">