huge Laravel 10 upgrade

support/laravel-translation/resources/assets/css/main.css

@@ -0,0 +1,262 @@
+/**
+ * This injects Tailwind's base styles, which is a combination of
+ * Normalize.css and some additional base styles.
+ *
+ * You can see the styles here:
+ * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/preflight";
+ */
+
+@tailwind preflight;
+/**
+ * This injects any component classes registered by plugins.
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/components";
+ */
+
+@tailwind components;
+/**
+ * Here you would add any of your custom component classes; stuff that you'd
+ * want loaded *before* the utilities so that the utilities could still
+ * override them.
+ *
+ * Example:
+ *
+ * .btn { ... }
+ * .form-input { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "components/buttons";
+ * @import "components/forms";
+ */
+
+/**
+ * This injects all of Tailwind's utility classes, generated based on your
+ * config file.
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/utilities";
+ */
+
+@tailwind utilities;
+/**
+ * Here you would add any custom utilities you need that don't come out of the
+ * box with Tailwind.
+ *
+ * Example :
+ *
+ * .bg-pattern-graph-paper { ... }
+ * .skew-45 { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "utilities/background-patterns";
+ * @import "utilities/skew-transforms";
+ */
+
+body {
+    @apply bg-grey-lighter text-grey-darkest
+}
+
+ul {
+    list-style-type: none;
+    @apply flex;
+}
+
+li {
+    @apply px-4;
+}
+
+a {
+    @apply text-blue;
+}
+
+nav.header {
+    background: linear-gradient(90deg, #125b93, #2891c4);
+    @apply border-b flex items-center h-16 text-white w-full
+}
+
+nav a {
+    @apply .opacity-75 text-white no-underline flex items-center
+}
+
+nav a.active {
+    @apply opacity-100
+}
+
+nav a:hover {
+    @apply opacity-100 underline
+}
+
+.panel {
+    @apply bg-white rounded m-6 shadow text-grey-dark
+}
+
+.panel-header {
+    @apply p-4 text-lg border-b flex items-center font-thin
+}
+
+.panel-footer {
+    @apply border-t bg-grey-lighter p-4
+}
+
+.panel-body table {
+    @apply w-full table-fixed;
+}
+
+.panel-body th,
+.panel-body td {
+    @apply text-left p-4 overflow-x-auto
+}
+
+.panel-body th {
+    @apply text-grey-darker
+}
+
+.panel-body td {
+    @apply font-thin align-top
+}
+
+.panel-body tr {
+    @apply border-b
+}
+
+.panel-body thead tr {
+    @apply bg-grey-lighter
+}
+
+.panel-body tbody tr:nth-child(even) {
+    @apply bg-grey-lighter
+}
+
+.panel-body tbody tr:hover,
+.panel-body tbody tr:nth-child(even):hover {
+    @apply bg-blue-lightest
+}
+
+.panel-body tbody tr:last-child {
+    @apply border-none
+}
+
+.panel-body td textarea {
+    overflow-wrap: inherit;
+    @apply border-none resize-none bg-transparent text-grey-darker w-full font-thin h-auto p-0
+}
+
+.panel-body td textarea.active {
+    @apply w-full rounded h-32 p-2 border border-solid border-grey
+}
+
+.panel-body td textarea:focus {
+    @apply outline-none;
+}
+
+.button {
+    @apply bg-transparent text-grey-darker py-2 px-4 border border-grey rounded text-sm font-bold no-underline
+}
+
+.button:hover {
+    @apply text-blue
+}
+
+.button-blue {
+    @apply bg-blue text-white border-blue
+}
+
+.button-blue:hover {
+    @apply text-white bg-blue-dark
+}
+
+.input-group {
+    @apply w-full mb-6
+}
+
+.input-group label {
+    @apply block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2
+}
+
+.input-group input {
+    @apply appearance-none block w-full bg-grey-lighter text-grey-darker border rounded py-3 px-4 mb-3 leading-tight
+}
+
+.input-group:last-child {
+    @apply mb-0
+}
+
+.input-group input.error {
+    @apply border-red
+}
+
+.input-group .error-text {
+    @apply text-red text-xs italic
+}
+
+.select-group {
+    @apply relative mr-2
+}
+
+.select-group:last-child {
+    @apply m-0
+}
+
+.select-group select {
+    @apply text-base block appearance-none bg-white border text-grey-darker uppercase py-2 px-4 pr-8 rounded leading-tight max-w-xs font-thin
+}
+
+.select-group select:focus {
+    @apply outline-none border-grey
+}
+
+.select-group .caret {
+    @apply pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker
+}
+
+.select-group .caret svg {
+    @apply fill-current h-4 w-4
+}
+
+.w-1\/10 {
+    width: 10%;
+}
+
+.search-input {
+    background: url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com"><path d="M 11.732 12.439 C 9.047 14.525 5.109 12.921 4.645 9.553 C 4.181 6.183 7.538 3.575 10.689 4.858 C 13.399 5.962 14.306 9.349 12.512 11.66 L 15.466 14.603 L 14.682 15.388 L 11.738 12.439 Z M 9.027 12.263 C 11.577 12.263 13.172 9.5 11.897 7.291 C 11.304 6.267 10.21 5.634 9.027 5.634 C 6.476 5.634 4.88 8.397 6.157 10.606 C 6.749 11.63 7.842 12.263 9.027 12.263 Z" style="fill: rgb(96, 111, 123);"/></svg>');
+    @apply bg-grey-lighter rounded pl-10 py-2 pr-4 bg-no-repeat bg-contain transition border text-grey-darker font-thin w-full
+}
+
+.search-input:focus {
+    @apply outline-none bg-white border border-grey-light
+}
+
+.transition {
+    transition: all .1s ease-in;
+}
+
+.search {
+    max-width: 500px;
+    @apply mx-2 relative flex-1
+}
+
+ul.search-results {
+    max-height: 300px;
+    @apply font-thin pl-0 block absolute w-full bg-grey-lighter border border-t-0 rounded rounded-t-none overflow-x-hidden overflow-y-scroll
+}
+
+ul.search-results li {
+    @apply px-4 py-2 border-b pl-10;
+}
+
+ul.search-results li:last-child {
+    @apply border-b-0;
+}
+
+.search.has-results .search-input {
+    @apply border-b-0 rounded-b-none bg-white
+}

support/laravel-translation/resources/assets/js/app.js

@@ -0,0 +1,63 @@
+
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
+// require('./bootstrap');
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Next we will register the CSRF Token as a common header with Axios so that
+ * all outgoing HTTP requests automatically have it attached. This is just
+ * a simple convenience so we don't have to attach every token manually.
+ */
+
+let token = document.head.querySelector('meta[name="csrf-token"]');
+
+if (token) {
+    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
+} else {
+    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
+}
+
+window.Vue = require('vue');
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+Vue.component('translation-input', require('./components/TranslationInput.vue').default);
+
+const app = new Vue({
+    el: '#app',
+
+    data: function () {
+        return {
+            showAdvancedOptions: false,
+        }
+    },
+
+    methods: {
+        submit: function(event) {
+            event.target.form.submit();
+        },
+
+        toggleAdvancedOptions(event) {
+            event.preventDefault();
+            this.showAdvancedOptions = !this.showAdvancedOptions;
+        }
+    }
+});

support/laravel-translation/resources/assets/js/bootstrap.js

@@ -0,0 +1,56 @@
+
+window._ = require('lodash');
+window.Popper = require('popper.js').default;
+
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Next we will register the CSRF Token as a common header with Axios so that
+ * all outgoing HTTP requests automatically have it attached. This is just
+ * a simple convenience so we don't have to attach every token manually.
+ */
+
+let token = document.head.querySelector('meta[name="csrf-token"]');
+
+if (token) {
+    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
+} else {
+    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
+}
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo'
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: process.env.MIX_PUSHER_APP_KEY,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     encrypted: true
+// });

support/laravel-translation/resources/assets/js/components/TranslationInput.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="flex">
+        <svg v-show="!isActive && isLoading" v-on:click="setActive" class="cursor-pointer fill-current w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 2C0 .9.9 0 2 0h14l4 4v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5 0v6h10V2H5zm6 1h3v4h-3V3z"/></svg>
+        <svg v-show="!isActive && hasSaved" v-on:click="setActive" class="cursor-pointer fill-current text-green w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM6.7 9.29L9 11.6l4.3-4.3 1.4 1.42L9 14.4l-3.7-3.7 1.4-1.42z"/></svg>
+        <svg v-show="!isActive && hasErrored" v-on:click="setActive" class="cursor-pointer fill-current text-red w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z"/></svg>
+        <svg v-show="!isActive && !hasSaved && !hasErrored && !isLoading" v-on:click="setActive" class="cursor-pointer fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"/></svg>
+        <textarea 
+            rows="1" 
+            v-model="translation" 
+            v-bind:class="{ active: isActive }"
+            v-on:focus="setActive"
+            v-on:blur="storeTranslation"
+            ref="trans"
+        ></textarea>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['initialTranslation', 'language', 'group', 'translationKey', 'route'],
+
+        data: function() {
+            return {
+                isActive: false,
+                hasSaved: false,
+                hasErrored: false,
+                isLoading: false,
+                hasChanged: false,
+                translation: this.initialTranslation
+            }
+        },
+
+        methods: {
+            setActive: function() {
+                this.isActive = true;
+                this.$refs.trans.focus();
+            },
+            storeTranslation: function() {
+                this.isActive = false;
+                if(!this.hasChanged) {
+                    return;
+                }
+                this.isLoading = true;
+                window.axios.post(`/${this.route}/${this.language}`, {
+                    language: this.language,
+                    group: this.group,
+                    key: this.translationKey,
+                    value: this.translation
+                }).then((response) => {
+                    this.hasSaved = true;
+                    this.isLoading = false;
+                    this.hasChanged = false;
+                })
+                .catch((error) => {
+                    this.hasErrored = true;
+                    this.isLoading = false;
+                })
+            }
+        },
+
+        watch: {
+            hasSaved: function(hasSaved) {
+                if(hasSaved) {
+                    setTimeout(() => { this.hasSaved = false }, 3000)
+                }
+            },
+            hasErrored: function(hasErrored) {
+                if(hasErrored) {
+                    setTimeout(() => { this.hasErrored = false }, 3000)
+                }
+            },
+            translation: function(translation)
+            {
+                this.hasChanged = true;
+            }
+        }
+    }
+</script>