Added author to QuoteBlock. Fixes #1037 (#1173)

core/Piranha.Manager/assets/dist/js/piranha.contentedit.js

@@ -497,8 +497,19 @@ Vue.component("missing-block", {
 });
 Vue.component("quote-block", {
   props: ["uid", "model"],
+  data: function () {
+    return {
+      placeholder: {
+        body: "",
+        author: ""
+      }
+    };
+  },
   methods: {
-    onBlur: function (e) {
+    onAuthorBlur: function (e) {
+      this.model.author.value = e.target.innerText;
+    },
+    onBodyBlur: function (e) {
       this.model.body.value = e.target.innerText; // Tell parent that title has been updated
 
       var title = this.model.body.value.replace(/(<([^>]+)>)/ig, "");
@@ -513,12 +524,32 @@ Vue.component("quote-block", {
       });
     }
   },
-  computed: {
-    isEmpty: function () {
-      return piranha.utils.isEmptyText(this.model.body.value);
-    }
-  },
-  template: "\n<div class=\"block-body\" :class=\"{ empty: isEmpty }\">\n    <i class=\"fas fa-quote-right quote\"></i>\n    <p class=\"lead\" contenteditable=\"true\" spellcheck=\"false\" v-html=\"model.body.value\" v-on:blur=\"onBlur\"></p>\n</div>\n"
+  created: function () {
+    var quotes = [{
+      author: "Nelson Mandela",
+      body: "The greatest glory in living lies not in never falling, but in rising every time we fall."
+    }, {
+      author: "Walt Disney",
+      body: "The way to get started is to quit talking and begin doing."
+    }, {
+      author: "Eleanor Roosevelt",
+      body: "The future belongs to those who believe in the beauty of their dreams."
+    }, {
+      author: "John Lennon",
+      body: "Life is what happens when you're busy making other plans."
+    }, {
+      author: "Audrey Hepburn",
+      body: "Nothing is impossible, the word itself says, 'I'm possible!'"
+    }, {
+      author: "Mark Twain",
+      body: "Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do."
+    }, {
+      author: "Maya Angelou",
+      body: "You will face many defeats in life, but never let yourself be defeated."
+    }];
+    this.placeholder = quotes[Math.floor(Math.random() * quotes.length)];
+  },
+  template: "\n<div class=\"block-body\">\n    <blockquote class=\"blockquote\">\n        <p contenteditable=\"true\" class=\"blockquote-body\" v-html=\"model.body.value\" v-on:blur=\"onBodyBlur\" :data-placeholder=\"placeholder.body\"></p>\n        <footer contenteditable=\"true\" class=\"blockquote-footer\" v-html=\"model.author.value\" v-on:blur=\"onAuthorBlur\" :data-placeholder=\"placeholder.author\"></footer>\n    </blockquote>\n</div>\n"
 });
 Vue.component("separator-block", {
   props: ["model"],

core/Piranha.Manager/assets/src/js/components/blocks/quote-block.vue

@@ -1,15 +1,28 @@
 <template>
-    <div class="block-body" :class="{ empty: isEmpty }">
-        <i class="fas fa-quote-right quote"></i>
-        <p class="lead" contenteditable="true" spellcheck="false" v-html="model.body.value" v-on:blur="onBlur"></p>
+    <div class="block-body">
+        <blockquote class="blockquote">
+            <p contenteditable="true" class="blockquote-body" v-html="model.body.value" v-on:blur="onBodyBlur" :data-placeholder="placeholder.body"></p>
+            <footer contenteditable="true" class="blockquote-footer" v-html="model.author.value" v-on:blur="onAuthorBlur" :data-placeholder="placeholder.author"></footer>
+        </blockquote>
     </div>
 </template>
 
 <script>
 export default {
     props: ["uid", "model"],
+    data: function () {
+        return {
+            placeholder: {
+                body: "",
+                author: ""
+            }
+        }
+    },
     methods: {
-        onBlur: function (e) {
+        onAuthorBlur: function (e) {
+            this.model.author.value = e.target.innerText;
+        },
+        onBodyBlur: function (e) {
             this.model.body.value = e.target.innerText;
 
             // Tell parent that title has been updated
@@ -24,10 +37,39 @@ export default {
             });
         }
     },
-    computed: {
-        isEmpty: function () {
-            return piranha.utils.isEmptyText(this.model.body.value);
-        }
+    created: function () {
+        var quotes = [
+            {
+                author: "Nelson Mandela",
+                body: "The greatest glory in living lies not in never falling, but in rising every time we fall."
+            },
+            {
+                author: "Walt Disney",
+                body: "The way to get started is to quit talking and begin doing."
+            },
+            {
+                author: "Eleanor Roosevelt",
+                body: "The future belongs to those who believe in the beauty of their dreams."
+            },
+            {
+                author: "John Lennon",
+                body: "Life is what happens when you're busy making other plans."
+            },
+            {
+                author: "Audrey Hepburn",
+                body: "Nothing is impossible, the word itself says, 'I'm possible!'"
+            },
+            {
+                author: "Mark Twain",
+                body: "Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do."
+            },
+            {
+                author: "Maya Angelou",
+                body: "You will face many defeats in life, but never let yourself be defeated."
+            },
+        ];
+
+        this.placeholder = quotes[Math.floor(Math.random() * quotes.length)];
     }
 }
 </script>

core/Piranha.Manager/assets/src/scss/inc/_blocks.scss

@@ -203,31 +203,24 @@
 }
 
 .quote-block {
-    .empty:not(:focus-within) {
-        background: $gray-100 url("../img/empty-text.png") no-repeat 50% 50%;
-        height: 8rem;
-    }
-
-    p {
-        color: $gray-600;
-        height: 100%;
-        min-height: 2rem;
-        font-family: "Open Sans", serif;
-        font-size: 1.4rem;
-        margin-left: 4.5rem;
-    }
+    .blockquote {
+        *[contenteditable] {
+            cursor: text;
+            padding: .5rem;
+        }
 
-    .quote {
-        display: none;
-        color: $gray-500;
-        float: left;
-        font-size: 2rem;
-        padding: .25rem 1rem;
-    }
+        *[data-placeholder]:empty {
+            &:after {
+                content: attr(data-placeholder);
+                color: $gray-500;
+            }
+        }
 
-    :not(.empty), :focus-within {
-        .quote {
-            display: inline;
+        .blockquote-body {
+            font-family: "Open Sans", serif;
+            font-size: 1.4rem;
+            margin-bottom: 0;
+            color: $gray-600;
         }
     }
 }

core/Piranha/Extend/Blocks/QuoteBlock.cs

@@ -18,6 +18,11 @@ namespace Piranha.Extend.Blocks
     [BlockType(Name = "Quote", Category = "Content", Icon = "fas fa-quote-right", Component = "quote-block")]
     public class QuoteBlock : Block, ISearchable
     {
+        /// <summary>
+        /// Gets/sets the author
+        /// </summary>
+        public StringField Author { get; set; }
+
         /// <summary>
         /// Gets/sets the text body.
         /// </summary>

examples/MvcWeb/Views/Cms/DisplayTemplates/QuoteBlock.cshtml

@@ -1,7 +1,11 @@
 @model Piranha.Extend.Blocks.QuoteBlock
 
 <div class="block">
-    <blockquote>
-        @Model.Body
+    <blockquote class="blockquote">
+        <p>@Model.Body</p>
+        @if (!string.IsNullOrEmpty(Model.Author))
+        {
+            <footer class="blockquote-footer">@Model.Author</footer>
+        }        
     </blockquote>
 </div>

examples/RazorWeb/Pages/DisplayTemplates/QuoteBlock.cshtml

@@ -1,7 +1,11 @@
 @model Piranha.Extend.Blocks.QuoteBlock
 
 <div class="block">
-    <blockquote>
-        @Model.Body
+    <blockquote class="blockquote">
+        <p>@Model.Body</p>
+        @if (!string.IsNullOrEmpty(Model.Author))
+        {
+            <footer class="blockquote-footer">@Model.Author</footer>
+        }        
     </blockquote>
 </div>