Merge branch 'release/4.1.3'

* release/4.1.3: (23 commits)
  Fixed #434
  wip
  ui/ux enhancements to the editor
  Added the medium-zoom package to the default template
  Dependency updates and Laravel 5.8 support
  polishing the default template
  wip on the default template
  wip
  wip
  wip
  added support in the stub files for #434
  wip
  wip
  wip
  wip
  wip on #434
  wip on #434
  added topic support in the view stubs and wip on single select vue component #434
  Apply fixes from StyleCI (#437)
  wip on topics #434
  ...

composer.json

@@ -17,11 +17,11 @@
 	],
 	"require": {
 		"php": "^7.1.3",
-		"laravel/framework": "~5.7"
+		"laravel/framework": "~5.7.7|~5.8.0"
 	},
 	"require-dev": {
 		"mockery/mockery": "^1.1",
-		"orchestra/testbench": "~3.7.0",
+		"orchestra/testbench": "~3.7",
 		"phpunit/phpunit": "^7.4"
 	},
 	"autoload": {

phpunit.xml.dist

@@ -13,9 +13,13 @@
          verbose="true"
 >
     <testsuites>
-        <testsuite name="Unit">
+        <testsuite name="Canvas Unit Test Suite">
             <directory suffix="Test.php">./tests/Unit</directory>
         </testsuite>
+
+        <testsuite name="Canvas Integration Test Suite">
+            <directory suffix="Test.php">./tests/Integration</directory>
+        </testsuite>
     </testsuites>
     <filter>
         <whitelist processUncoveredFilesFromWhitelist="true">

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/js/app.js": "/js/app.js?id=cab446fe67c77f318dd0",
-    "/css/app.css": "/css/app.css?id=bda34711dea8821a4299",
-    "/js/app.js.map": "/js/app.js.map?id=80a9c6938a70e635658a",
+    "/js/app.js": "/js/app.js?id=af6689c6964800e9f755",
+    "/css/app.css": "/css/app.css?id=f13a10a1564f49e2b5f0",
+    "/js/app.js.map": "/js/app.js.map?id=159ebb8d695d07b48e9d",
     "/favicon.png": "/favicon.png?id=39d853e8c2bdbc38fde3"
 }

resources/js/components/Editor.vue

@@ -230,6 +230,8 @@
 
     .ql-editor {
         font-family: "Merriweather", serif;
+        font-weight: 300;
+        color: hsla(0,0%,0%,0.9);
         font-size: 1.1rem;
         line-height: 1.9;
         padding: 0;
@@ -319,6 +321,7 @@
     }
 
     .ql-container hr {
+        margin-top: 0;
         border: none;
         color: #111;
         letter-spacing: 1em;
@@ -385,6 +388,7 @@
     }
 
     .embedded_image p {
+        margin-bottom: 0 !important;
         color: #6c757d;
         padding-top: 1rem;
         font-size: 0.9rem;

resources/js/components/Tag.vue → resources/js/components/Slug.vue

@@ -1,10 +1,10 @@
 <script type="text/ecmascript-6">
     export default {
-        props: ['tag'],
+        props: ['entity'],
 
         data() {
             return {
-                name: this.tag ? this.tag.name : ''
+                name: this.entity ? this.entity.name : ''
             }
         },
 

resources/js/components/MultiSelect.vue → resources/js/components/TagSelect.vue

@@ -25,10 +25,12 @@
 
         methods: {
             addTag(newTag) {
+
                 const tag = {
                     name: newTag,
                     slug: this.slugify(newTag)
                 };
+
                 this.options.push(tag);
                 this.value.push(tag)
             },
@@ -52,8 +54,8 @@
     <div>
         <multiselect
                 v-model="value"
-                tag-placeholder="Add a new tag"
                 placeholder="Select some tags..."
+                tag-placeholder="Add a new tag"
                 label="name"
                 track-by="slug"
                 :options="options"
@@ -63,7 +65,7 @@
         </multiselect>
 
         <div class="tags">
-            <template v-for="tags,index in value">
+            <template v-for="(tags, index) in value">
                 <input hidden type="hidden" :name="`tags[${index}][name]`" :value="tags.name">
                 <input hidden type="hidden" :name="`tags[${index}][slug]`" :value="tags.slug">
             </template>
@@ -91,29 +93,30 @@
         background: #3490dc;
     }
 
-    .multiselect__content-wrapper {
-        border-top: 1px solid #e8e8e8;
-    }
-
     .multiselect,
     .multiselect__input,
     .multiselect__single {
         font-size: 14px;
         padding: 0;
+        border-radius: 0;
     }
 
+    .multiselect__input:focus::placeholder,
     .multiselect__input:focus::-webkit-input-placeholder,
+    .multiselect__input::placeholder,
     .multiselect__input::-webkit-input-placeholder,
     .multiselect__placeholder {
         color: #6c757d;
         opacity: 1;
+        padding-top: 0;
+        line-height: 1;
     }
 
     .multiselect__input {
-        padding-top: 3px !important;
+        line-height: 1;
     }
 
-    .multiselect--active {
-        padding-bottom: 2px !important;
+    .multiselect__tag {
+        padding-bottom: 2px;
     }
 </style>

resources/js/components/TopicSelect.vue

@@ -0,0 +1,82 @@
+<script type="text/ecmascript-6">
+    import Multiselect from 'vue-multiselect'
+
+    export default {
+        props: ['topics', 'assigned'],
+
+        components: {
+            Multiselect
+        },
+
+        data() {
+            const allTopics = this.topics.map(obj => {
+                let filtered = {};
+
+                filtered['name'] = obj.name;
+                filtered['slug'] = obj.slug;
+
+                return filtered;
+            });
+
+            return {
+                value: this.assigned ? this.assigned : [],
+                options: allTopics
+            }
+        },
+
+        methods: {
+            onChange(value, id) {
+                if (this.value == null) {
+                    this.value = [];
+                }
+            },
+
+            addTopic(searchQuery, id) {
+                const topic = {
+                    name: searchQuery,
+                    slug: this.slugify(searchQuery)
+                };
+
+                this.options.push(topic);
+                this.value.push(topic);
+            },
+
+            /**
+             * Convert a string to a slug.
+             *
+             * @source https://gist.github.com/mathewbyrne/1280286
+             */
+            slugify(text) {
+                return text.toString().toLowerCase()
+                    .replace(/\s+/g, '-')
+                    .replace(/[^\w\-]+/g, '')
+                    .replace(/--+/g, '-')
+            }
+        }
+    }
+</script>
+
+<template>
+    <div>
+        <multiselect
+                v-model="value"
+                placeholder="Select a topic..."
+                tag-placeholder="Add this as new topic"
+                label="name"
+                track-by="slug"
+                :options="options"
+                :taggable="true"
+                @input="onChange"
+                @tag="addTopic">
+        </multiselect>
+
+        <div class="topics">
+            <template v-if="value.length != 0">
+                <input hidden type="hidden" :name="`topic[name]`" :value="value.name">
+                <input hidden type="hidden" :name="`topic[slug]`" :value="value.slug">
+            </template>
+        </div>
+    </div>
+</template>
+
+<style rel="stylesheet" type="text/css" src="vue-multiselect/dist/vue-multiselect.min.css"></style>

resources/views/components/forms/post/create.blade.php

@@ -6,7 +6,7 @@
     <div class="form-group row my-3">
         <div class="col-lg-12">
             <textarea name="title" class="form-control-lg form-control border-0 pl-0 serif" rows="1"
-                      placeholder="Post Title" style="font-size: 42px; resize: none;">{{ old('title') }}</textarea>
+                      placeholder="Title" style="font-size: 42px; resize: none;">{{ old('title') }}</textarea>
         </div>
     </div>
 

resources/views/components/forms/post/edit.blade.php

@@ -6,7 +6,7 @@
     <div class="form-group row my-3">
         <div class="col-lg-12">
             <textarea name="title" class="form-control-lg form-control border-0 pl-0 serif" rows="1"
-                      placeholder="Post Title" style="font-size: 42px; resize: none;">{{ $data['post']->title }}</textarea>
+                      placeholder="Title" style="font-size: 42px; resize: none;">{{ $data['post']->title }}</textarea>
         </div>
     </div>
 

resources/views/components/forms/tag/create.blade.php

@@ -2,7 +2,7 @@
     @csrf
     <input type="hidden" name="id" hidden value="{{ $data['id'] }}">
 
-    <tag inline-template>
+    <slug inline-template>
         <div>
             <div class="form-group row my-5">
                 <div class="col-lg-12">
@@ -23,5 +23,5 @@ class="form-control-lg form-control border-0 px-0"
                 </div>
             </div>
         </div>
-    </tag>
+    </slug>
 </form>

resources/views/components/forms/tag/edit.blade.php

@@ -2,7 +2,7 @@
     @method('PUT')
     @csrf
 
-    <tag :tag="{{ $data['tag'] }}" inline-template>
+    <slug :entity="{{ $data['tag'] }}" inline-template>
         <div>
             <div class="form-group row my-5">
                 <div class="col-lg-12">
@@ -28,5 +28,5 @@ class="form-control-lg form-control border-0 px-0"
                 </div>
             </div>
         </div>
-    </tag>
+    </slug>
 </form>

resources/views/components/forms/topic/create.blade.php

@@ -0,0 +1,27 @@
+<form role="form" id="form-create" method="POST" action="{{ route('canvas.topic.store') }}">
+    @csrf
+    <input type="hidden" name="id" hidden value="{{ $data['id'] }}">
+
+    <slug inline-template>
+        <div>
+            <div class="form-group row my-5">
+                <div class="col-lg-12">
+                    <input type="text" name="name" v-model="name" title="Name"
+                           class="form-control-lg form-control border-0 px-0"
+                           value="{{ old('name') }}" required placeholder="Give your topic a name">
+                    @if ($errors->has('name'))
+                        <div class="invalid-feedback d-block">
+                            <strong>{{ $errors->first('name') }}</strong>
+                        </div>
+                    @endif
+                </div>
+            </div>
+            <div class="form-group row">
+                <div class="col-lg-12">
+                    <p class="lead text-muted" style="cursor: default"><span class="text-primary">@{{ slug }}</span></p>
+                    <input type="hidden" name="slug" v-model="slug" readonly>
+                </div>
+            </div>
+        </div>
+    </slug>
+</form>

resources/views/components/forms/topic/edit.blade.php

@@ -0,0 +1,32 @@
+<form role="form" id="form-edit" method="POST" action="{{ route('canvas.topic.update', $data['topic']->id) }}">
+    @method('PUT')
+    @csrf
+
+    <slug :entity="{{ $data['topic'] }}" inline-template>
+        <div>
+            <div class="form-group row my-5">
+                <div class="col-lg-12">
+                    <input type="text" name="name" v-model="name" value="{{ $data['topic']->name }}"
+                           class="form-control-lg form-control border-0 px-0"
+                           title="Name" required placeholder="Give your topic a name">
+                    @if ($errors->has('name'))
+                        <div class="invalid-feedback d-block">
+                            <strong>{{ $errors->first('name') }}</strong>
+                        </div>
+                    @endif
+                </div>
+            </div>
+            <div class="form-group row">
+                <div class="col-lg-12">
+                    <p class="lead text-muted" style="cursor: default"><span class="text-primary">@{{ slug }}</span></p>
+                    <input type="hidden" name="slug" v-model="slug" readonly>
+                    @if ($errors->has('slug'))
+                        <div class="invalid-feedback d-block">
+                            <strong>{{ $errors->first('slug') }}</strong>
+                        </div>
+                    @endif
+                </div>
+            </div>
+        </div>
+    </slug>
+</form>

resources/views/components/modals/post/create/settings.blade.php

@@ -24,11 +24,18 @@
                                   placeholder="A descriptive summary.." title="Summary">{{ old('summary') }}</textarea>
                     </div>
                 </div>
+                <div class="form-group row">
+                    <div class="col-12">
+                        <label for="topic" class="font-weight-bold">Topic</label>
+
+                        <topic-select :topics="{{ $data['topics'] }}"></topic-select>
+                    </div>
+                </div>
                 <div class="form-group row">
                     <div class="col-12">
                         <label for="tags" class="font-weight-bold">Tags</label>
 
-                        <multi-select :tags="{{ $data['tags'] }}"></multi-select>
+                        <tag-select :tags="{{ $data['tags'] }}"></tag-select>
                     </div>
                 </div>
             </div>