Merge remote-tracking branch 'origin/version-1.8.3' into v2

# Conflicts:
#	app/Http/Controllers/FileFunctions/EditItemsController.php
#	config/vuefilemanager.php
#	public/mix-manifest.json

app/Http/Controllers/FileFunctions/EditItemsController.php

@@ -116,7 +116,7 @@ class EditItemsController extends Controller
         }
 
         // If request have a change folder icon values set the folder icon
-        if ($request->type === 'folder' && $request->filled('folder_icon')) {
+        if ($request->type === 'folder' && $request->filled('icon')) {
             
             Editor::set_folder_icon($request->folder_icon, $id);
         }
@@ -158,9 +158,9 @@ class EditItemsController extends Controller
         }
 
         // If request have a change folder icon values set the folder icon
-        if ($request->type === 'folder' && $request->filled('folder_icon')) {
+        if ($request->type === 'folder' && $request->filled('icon')) {
 
-            Editor::set_folder_icon($request->folder_icon, $unique_id, $shared);
+            Editor::set_folder_icon($request->icon, $unique_id, $shared);
         }
 
         // Rename item

app/Http/Tools/Demo.php

@@ -42,6 +42,8 @@ class Demo
             'unique_id'  => random_int(1000, 9999),
             'user_scope' => $user_scope,
             'items'      => '0',
+            'icon_color' => isset($request->icon['color']) ? $request->icon['color'] : null,
+            'icon_emoji' => isset($request->icon['emoji']) ? $request->icon['emoji'] : null,
             'updated_at' => Carbon::now()->format('j M Y \a\t H:i'),
             'created_at' => Carbon::now()->format('j M Y \a\t H:i'),
         ];
@@ -72,8 +74,8 @@ class Demo
 
         if ($item) {
             $item->name = $request->name;
-            $item->icon_emoji = $request->folder_icon['emoji'] ?? null;
+            $item->icon_emoji = $request->icon['emoji'] ?? null;
-            $item->icon_color = $request->folder_icon['color'] ?? null;
+            $item->icon_color = $request->icon['color'] ?? null;
 
             return $item;
 

app/Http/Tools/Editor.php

@@ -29,11 +29,11 @@ class Editor
     /**
      * Store folder icon
      *
-     * @param $folder_icon
+     * @param $icon
      * @param $unique_id
      * @param $shared
      */
-    public static function set_folder_icon($folder_icon, $unique_id, $shared = null)
+    public static function set_folder_icon($icon, $unique_id, $shared = null)
     {
         $user_id = is_null($shared) ? Auth::id() : $shared->user_id;
 
@@ -43,21 +43,21 @@ class Editor
             ->first();
 
         // Set default folder icon
-        if ($folder_icon === 'default') {
+        if ($icon === 'default') {
             $folder->icon_emoji = null;
             $folder->icon_color = null;
         }
 
         // If request have emoji set folder icon emoji
-        if (isset($folder_icon['emoji'])) {
+        if (isset($icon['emoji'])) {
-            $folder->icon_emoji = $folder_icon['emoji'];
+            $folder->icon_emoji = $icon['emoji'];
             $folder->icon_color = null;
         }
 
         // If request have color set folder icon color
-        if (isset($folder_icon['color'])) {
+        if (isset($icon['color'])) {
             $folder->icon_emoji = null;
-            $folder->icon_color = $folder_icon['color'];
+            $folder->icon_color = $icon['color'];
         }
 
         // Save changes
@@ -235,6 +235,8 @@ class Editor
             'user_id'    => $user_id,
             'type'       => 'folder',
             'name'       => $name,
+            'icon_color' => isset($request->icon['color']) ? $request->icon['color'] : null,
+            'icon_emoji' => isset($request->icon['emoji']) ? $request->icon['emoji'] : null,
         ]);
 
         // Return new folder

app/Notifications/ResetPassword.php

@@ -41,14 +41,15 @@ class ResetPassword extends Notification
     public function toMail($notifiable)
     {
         $reset_url = url('/create-new-password?token=' . $this->token);
+        $app_name = get_setting('app_title') ?? 'VueFileManager';
 
         return (new MailMessage)
-            ->subject(__('vuefilemanager.reset_password_subject') . config('vuefilemanager.app_name'))
+            ->subject(__('vuefilemanager.reset_password_subject') .  $app_name)
             ->greeting(__('vuefilemanager.reset_password_greeting'))
             ->line(__('vuefilemanager.reset_password_line_1'))
             ->action(__('vuefilemanager.reset_password_action'), $reset_url)
             ->line(__('vuefilemanager.reset_password_line_2'))
-            ->salutation(__('vuefilemanager.salutation') . ', ' . config('vuefilemanager.app_name'));
+            ->salutation(__('vuefilemanager.salutation') . ', ' .  $app_name);
     }
 
     /**

app/Notifications/SharedSendViaEmail.php

@@ -46,7 +46,8 @@ class SharedSendViaEmail extends Notification
             ->subject(__('vuefilemanager.shared_link_email_subject' , ['user' => $this->user->name]))
             ->greeting(__('vuefilemanager.shared_link_email_greeting'))
             ->line(__('vuefilemanager.shared_link_email_user', ['user' => $this->user->name, 'email' => $this->user->email]))
-            ->action(__('vuefilemanager.shared_link_email_link'), url('/shared', ['token' => $this->token]));
+            ->action(__('vuefilemanager.shared_link_email_link'), url('/shared', ['token' => $this->token]))
+            ->salutation(__('vuefilemanager.shared_link_email_salutation', ['app_name' => get_setting('app_title') ?? 'VueFileManager']));
     }
 
     /**

resources/js/components/FilesView/ContextMenu.vue

@@ -114,8 +114,8 @@
             </OptionGroup>
 
             <!-- Multi options -->
-            <OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && !multiSelectContextMenu">
+            <OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && !multiSelectContextMenu && item && !hasFile">
-                <Option @click.native="addToFavourites" v-if="item && !hasFile" :title=" isInFavourites
+                <Option @click.native="addToFavourites" :title=" isInFavourites
                                                                                     ? $t('context_menu.remove_from_favourites')
                                                                                     : $t('context_menu.add_to_favourites')" icon="favourites"/>
             </OptionGroup>

resources/js/components/Others/ColorPicker.vue

@@ -0,0 +1,128 @@
+<template>
+   <div class="color-pick-wrapper">
+        <label class="main-label">{{ $t('popup_rename.color_pick_label') }}:</label>
+        <ul class="color-wrapper">
+            <li v-for="(color, i) in colors" :key="i" @click="setColor( color )" class="single-color">
+                <check-icon v-if="color === selectedColor" class="color-icon" size="22"/>
+                <span :style="{background:color}" class="color-box"></span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { CheckIcon } from 'vue-feather-icons'
+
+export default {
+    name: 'ColorPicker',
+    props: [ 'pickedColor' ],
+    components: { CheckIcon },
+    data () {
+        return {
+            selectedColor: this.pickedColor,
+            colors: [
+                '#41B883',
+                '#FE6F6F',
+                '#FE6F91',
+                '#FE6FC0',
+                '#FE6FF0',
+                '#DD6FFE',
+                '#AD6FFE',
+                '#7D6FFE',
+                '#6F90FE',
+                '#6FC0FE',
+                '#6FF0FE',
+                '#6FFEDD',
+                '#6FFEAD',
+                '#6FFE7D',
+                '#90FE6F',
+                '#C0FE6F',
+                '#F0FE6F',
+                '#FEDD6F',
+                '#FEAD6F',
+                '#FE7D6F',
+                '#4c4c4c',
+                '#06070B',
+            ]
+        }
+    },
+    methods: {
+        setColor (value) {
+
+            this.selectedColor = value
+
+            this.$emit('input', value)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/vue-file-manager/_inapp-forms.scss";
+@import '@assets/vue-file-manager/_forms';
+
+.color-pick-wrapper {
+    .color-wrapper {
+        margin-bottom: 20px;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 32px);
+        justify-content: space-between;
+        gap: 7px;
+
+        .single-color {
+            height: 31px;
+            list-style: none;
+            border-radius: 8px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .color-icon {
+                z-index: 2;
+
+                polyline {
+                    stroke: white;
+                }
+            }
+
+            .color-box {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                display: block;
+            }
+        }
+    }
+}
+
+.main-label {
+    @include font-size(14);
+    font-weight: 700;
+    margin-bottom: 8px;
+    display: block;
+}
+
+.set-folder-icon {
+    position: relative;
+}
+
+@media (prefers-color-scheme: dark) {
+    .color-pick-wrapper {
+        .color-wrapper {
+            .single-color {
+                &.active-color {
+                    border: 2px solid;
+                }
+
+                &:hover {
+                    border: 2px solid $dark_mode_text_primary;
+                }
+            }
+        }
+    }
+}
+
+</style>

resources/js/components/Others/CreateFolder.vue

@@ -16,6 +16,10 @@
                     <input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" :placeholder="$t('popup_create_folder.placeholder')">
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
+
+                <SetFolderIcon v-if="isMoreOptions"/>
+
+                <ActionButton @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
             </ValidationObserver>
         </PopupContent>
 
@@ -44,11 +48,11 @@
     import PopupContent from '@/components/Others/Popup/PopupContent'
     import PopupHeader from '@/components/Others/Popup/PopupHeader'
     import ThumbnailItem from '@/components/Others/ThumbnailItem'
+    import SetFolderIcon from '@/components/Others/SetFolderIcon'
     import ActionButton from '@/components/Others/ActionButton'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import {required} from 'vee-validate/dist/rules'
     import {events} from '@/bus'
-    import axios from 'axios'
 
     export default {
         name: 'CreateFolder',
@@ -56,6 +60,7 @@
             ValidationProvider,
             ValidationObserver,
             ThumbnailItem,
+            SetFolderIcon,
             ActionButton,
             PopupWrapper,
             PopupActions,
@@ -64,19 +69,29 @@
             ButtonBase,
             required,
         },
+        computed: {
+            moreOptionsTitle() {
+                return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
+            }
+        },
         data() {
             return {
                 name: undefined,
+                isMoreOptions: false,
+                folderIcon: undefined
             }
         },
         methods: {
+            moreOptions() {
+                this.isMoreOptions = !this.isMoreOptions
+            },
             async createFolder() {
 
                 // Validate fields
                 const isValid = await this.$refs.createForm.validate();
 
                 if (isValid) {
-                    this.$store.dispatch('createFolder', this.name)
+                    this.$store.dispatch('createFolder', {'name':this.name, 'icon': this.folderIcon})
 
                     this.$closePopup()
 
@@ -85,11 +100,19 @@
             },
         },
         mounted() {
+            events.$on('setFolderIcon', (icon) => {
+                this.folderIcon = icon
+            })
+
             events.$on('popup:open', ({name}) => {
 
                 if (name === 'create-folder' && ! this.$isMobile())
                     this.$nextTick(() => this.$refs.input.focus())
             })
+
+            events.$on('setFolderIcon', (icon) => {
+                this.setFolderIcon = icon
+            })
         }
     }
 </script>

resources/js/components/Others/EmojiPicker.vue

@@ -0,0 +1,497 @@
+<template>
+    <div class="select-emoji-wrapper">
+        <label class="main-label">{{ $t('popup_rename.select_emoji_label') }}:</label>
+
+        <!-- Selected Emoji input -->
+        <div @click.stop="openList" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
+
+            <!-- If is emoji selected -->
+            <div class="select-input" v-if="selectedEmoji && selectedEmoji !== 'default'">
+                <div @click.stop="resetEmoji" class="select-input-icon-wrapper">
+                    <x-icon size="14" class="select-input-icon"/>
+                </div>
+                <Emoji class="emoji-preview" :emoji="selectedEmoji" location="emoji-picker-preview" />
+                <span>{{ selectedEmoji.name }}</span>
+            </div>
+
+            <!-- If is emoji not selected -->
+            <div class="not-selected" v-if="! selectedEmoji || selectedEmoji === 'default'">
+                <span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
+            </div>
+
+            <chevron-down-icon class="row-icon" size="19"/>
+        </div>
+
+        <!-- Emojis List -->
+        <transition name="slide-in">
+            <div v-if="selectOpen">
+                <!-- Spinner -->
+                <div v-if="!loadedList" class="emoji-wrapper">
+                    <Spinner/>
+                </div>
+
+                <!-- List -->
+                <div v-if="loadedList && emojis" class="emoji-wrapper">
+
+                    <!-- Search input -->
+                    <input @click.stop @input="searchEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')">
+
+                    <!-- Navigation of Emojis Groups -->
+                    <ul v-show="searchInput.length < 1" class="groups-list">
+                        <li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.emojisGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}">
+                            <Emoji :emoji="group.emoji" location="emoji-picker" />
+                        </li>
+                    </ul>
+
+                    <!-- All Emojis -->
+                    <div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box" class="group-wrapper">
+                        <div v-for="(group, name) in allEmoji()" :key="name" class="options-wrapper" :id="`group-${name}`">
+                            <label class="group-name-label">{{ name }}</label>
+                            <ul class="options-list">
+                                <li @click="setEmoji( emoji )" v-for="(emoji,i) in group" :key="i" class="option">
+                                    <Emoji :emoji="emoji" location="emoji-picker" />
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- Searched emojis -->
+                    <div v-if="searchInput.length > 0" class="group-wrapper">
+                        <div class="options-wrapper">
+                            <ul class="options-list">
+                                <li @click="setEmoji( emoji )" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
+                                    <Emoji :emoji="emoji" location="emoji-picker" />
+                                </li>
+                            </ul>
+                            <span class="not-found" v-if="filteredEmojis.length === 0 && filteredEmojisLoaded"> {{ $t('popup_rename.emoji_list_not_found') }}</span>
+                            <Spinner v-if=" ! filteredEmojisLoaded "/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import { ChevronDownIcon, XIcon } from 'vue-feather-icons'
+import Spinner from '@/components/FilesView/Spinner'
+import Emoji from '@/components/Others/Emoji'
+import { mapGetters } from 'vuex'
+import { groupBy } from 'lodash'
+import { events } from '@/bus'
+
+
+export default {
+    name: 'EmojiPicker',
+    props: [ 'pickedEmoji' ],
+    components: {
+        ChevronDownIcon,
+        Spinner,
+        Emoji,
+        XIcon,
+    },
+    computed: {
+        ...mapGetters([ 'emojis' ]),
+    },
+    data () {
+        return {
+            selectedEmoji: this.pickedEmoji,
+            searchInput: '',
+            filteredEmojis: [],
+            selectOpen: false,
+            loadedList: false,
+            filteredEmojisLoaded: true,
+            groupInView: 'Smileys & Emotion',
+        }
+    },
+    methods: {
+        allEmoji() {
+            return groupBy(this.emojis.emojisList, 'group')
+        },
+        checkGroupInView: _.debounce( function() {
+
+            this.emojis.emojisGroups.forEach(group => {
+
+                let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
+                let groupBox = document.getElementById('group-box').getBoundingClientRect()
+
+                // Check if the group is in the viewport of group-box
+                if (element.top < groupBox.top && element.bottom > groupBox.top) {
+                    this.groupInView = group.name
+                }
+            })
+
+        }, 200),
+        scrollToGroup(name) {
+
+            let group = document.getElementById(`group-${name}`)
+
+            group.scrollIntoView({ behavior: 'smooth' })
+
+            this.groupInView = name
+        },
+        searchEmojis() {
+
+            // Turn on spinner until filteredEmojis will loaded
+
+            this.filteredEmojisLoaded = false
+
+            this.filteredEmojis = [],
+
+            this.filterEmojis()
+
+        },
+        filterEmojis: _.debounce(function() {
+
+            this.filteredEmojis = this.emojis.emojisList.filter(emoji => emoji.name.includes( this.searchInput.toLowerCase() ))
+
+            this.filteredEmojisLoaded = true
+
+        }, 800),
+        openList() {
+
+            this.loadedList = false
+
+            this.selectOpen = !this.selectOpen
+
+            // Load emojis from server just if not loaded already
+            if (this.selectOpen && ! this.emojis) {
+                this.$store.dispatch('getEmojisList').then((loaded) => {
+                    this.loadedList = loaded
+                })
+            }
+
+            // Simulate loading for the emojisList processing
+            if(this.emojis) {
+                setTimeout(() => {
+                    this.loadedList = true
+                }, 20);
+            }
+
+            this.searchInput = ''
+
+            this.groupInView = 'Smileys & Emotion'
+        },
+        setEmoji(value) {
+
+            // Set emoji
+            this.selectedEmoji = value
+
+            this.$emit('input', value)
+
+            this.selectOpen = false
+        },
+        resetEmoji() {
+
+            this.selectedEmoji = undefined
+
+            this.$emit('input', 'default')
+        }
+    },
+     mounted() {
+
+        this.selectOpen = false
+
+        events.$on('unClick', () => {
+
+            this.selectOpen = false
+
+            this.loadedList = false
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/vue-file-manager/_inapp-forms.scss";
+@import '@assets/vue-file-manager/_forms';
+
+.select-emoji-wrapper {
+    margin-bottom: 20px;
+}
+
+.main-label {
+    @include font-size(14);
+    font-weight: 700;
+    margin-bottom: 8px;
+    display: block;
+}
+
+.emoji-wrapper {
+    height: 400px;
+    width: 100%;
+    position: absolute;
+    border: 1px solid transparent;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    z-index: 10;
+    top: 152px;
+
+
+    .groups-list {
+        display: grid;
+        grid-template-columns: repeat(9, auto);
+        justify-content: space-between;
+        overflow-x: auto;
+        overflow-y: hidden;
+        height: 90px;
+
+        .active {
+            background: $light_background;
+            border-radius: 8px;
+        }
+
+        .group-option {
+            width: 45px;
+            height: 45px;
+            list-style: none;
+            padding: 6px;
+            cursor: pointer;
+
+            &:hover {
+                background: $light_background;
+                border-radius: 8px;
+            }
+        }
+    }
+
+    .emoji-input {
+        width: 100%;
+        border-radius: 8px;
+        padding: 4px;
+        margin-bottom: 20px;
+        background: $light_background;
+        border: none;
+        padding: 13px 20px;
+        font-weight: 700;
+
+        &::placeholder {
+            font-weight: 700;
+            color: $light_text;
+        }
+    }
+
+    .group-wrapper {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        overflow-y: scroll;
+        padding: 0px;
+
+        .options-wrapper {
+            display: flex;
+            flex-wrap: wrap;
+            margin-bottom: 10px;
+
+            &:last-child {
+                margin-bottom: 0px;
+            }
+
+            .options-list {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, 45px);
+                justify-content: space-between;
+                width: 100%;
+            }
+
+            .group-name-label {
+                width: 100%;
+                @include font-size(14);
+                font-weight: 700;
+                margin-bottom: 10px;
+            }
+
+            .option {
+                list-style: none;
+                width: 45px;
+                height: 45px;
+                padding: 6px;
+                cursor: pointer;
+
+                &:hover {
+                    background: $light_background;
+                    border-radius: 8px;
+                }
+            }
+
+            .not-found {
+                align-self: center;
+                margin: auto;
+                font-weight: 700;
+                padding: 10px;
+                border-radius: 8px;
+                background: $light_background;
+                box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+            }
+        }
+    }
+}
+
+.select-input-wrapper {
+    height: 50px;
+    padding: 13px 20px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid transparent;
+    @include transition(150ms);
+
+    .row-icon {
+        @include transition(150ms);
+    }
+
+    &.active-menu {
+        border-color: $theme;
+        box-shadow: 0 0 7px rgba($theme, 0.3);
+
+        .row-icon {
+            transform: rotate(180deg);
+        }
+    }
+
+    .select-input {
+        @include font-size(16);
+        font-weight: 700;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .emoji-preview {
+            margin-left: 5px;
+            margin-right: 10px;
+            width: 22px;
+            height: 22px;
+        }
+
+        .select-input-icon-wrapper {
+            width: 22px;
+            height: 22px;
+            border-radius: 6px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: -7px;
+
+            &:hover {
+
+                .select-input-icon {
+                    line {
+                        stroke: $theme;
+                    }
+                }
+            }
+
+            .select-input-icon {
+                line {
+                    stroke: $text;
+                }
+            }
+        }
+    }
+
+    .not-selected {
+        span {
+            color: rgba($text, 0.5);
+            @include font-size(15);
+            font-weight: 700
+        }
+    }
+}
+
+.slide-in-enter-active {
+    transition: all 150ms ease;
+}
+
+.slide-in-enter {
+    opacity: 0;
+    transform: translateY(-210px);
+}
+
+.slide-in-enter-to {
+    transform: translateY(-134px);
+}
+
+@media (max-width: 690px) {
+    .emoji-wrapper {
+        height: 300px;
+    }
+}
+
+@media (max-width: 336px) {
+    .emoji-wrapper {
+        top: 173px;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+
+    .emoji-wrapper {
+        background: $dark_mode_background;
+
+        .emoji-input {
+            background: $dark_mode_foreground;
+        }
+
+        .groups-list {
+            .active {
+                background: $dark_mode_foreground !important;
+            }
+
+            .group-option {
+                &:hover {
+                    background: $dark_mode_foreground !important;
+                }
+            }
+        }
+
+        .options-wrapper {
+            .option {
+                &:hover {
+                    background: $dark_mode_foreground !important;
+                }
+            }
+
+            .not-found {
+                background: $dark_mode_foreground !important;
+            }
+        }
+    }
+
+    .select-input-wrapper {
+        background: $dark_mode_foreground;
+
+        .not-selected {
+            span {
+                color: $dark_mode_text_secondary;
+            }
+        }
+
+        .select-input-icon-wrapper {
+            &:hover {
+                .select-input-icon {
+                    line {
+                        stroke: $theme !important;
+                    }
+                }
+            }
+
+            .select-input-icon {
+                line {
+                    stroke: $dark_mode_text_primary !important;
+                }
+            }
+        }
+    }
+}
+
+</style>

resources/js/components/Others/Popup/PopupWrapper.vue

@@ -33,6 +33,9 @@
 
                 if (this.name === name)
                     this.isVisibleWrapper = true
+
+                if( (this.name !== name))
+                    this.isVisibleWrapper = false
             })
 
             // Open called popup

resources/js/components/Others/RenameItem.vue

@@ -24,7 +24,7 @@
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" :unique_id="pickedItem.unique_id" />
+                <SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem"/>
 
                 <ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
 
@@ -56,7 +56,6 @@ import ButtonBase from '@/components/FilesView/ButtonBase'
 import { XIcon } from 'vue-feather-icons'
 import { required } from 'vee-validate/dist/rules'
 import { events } from '@/bus'
-import axios from 'axios'
 
 export default {
     name: 'RenameItem',
@@ -100,7 +99,7 @@ export default {
                     unique_id: this.pickedItem.unique_id,
                     type: this.pickedItem.type,
                     name: this.pickedItem.name,
-                    folder_icon: this.setFolderIcon ? this.setFolderIcon : null
+                    icon: this.setFolderIcon ? this.setFolderIcon : null
                 }
 
                 // Rename item request
@@ -133,7 +132,7 @@ export default {
         })
 
         events.$on('setFolderIcon', (icon) => {
-            this.setFolderIcon = icon.value
+            this.setFolderIcon = icon
         })
     }
 }

resources/js/components/Others/SetFolderIcon.vue

@@ -1,595 +1,101 @@
 <template>
     <TabWrapper class="set-folder-icon">
 
-        <!-- Emojis -->
+        <!-- Emojis Picker -->
-        <TabOption :selected="true" id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
+        <TabOption :selected="true" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
-            <div class="select-emoji-wrapper">
+            <EmojiPicker :picked-emoji="pickedEmoji" v-model="selectedEmoji" />
-                <label class="main-label">{{ $t('popup_rename.select_emoji_label') }}:</label>
-
-                <!-- Selected Emoji input -->
-                <div @click.stop="openMenu" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
-
-                    <!-- If is emoji selected -->
-                    <div class="select-input" v-if="selectedEmoji">
-                        <div @click.stop="resetEmoji" class="select-input-icon-wrapper">
-                            <x-icon size="14" class="select-input-icon"/>
-                        </div>
-                        <Emoji class="emoji-preview" :emoji="selectedEmoji" location="emoji-picker-preview" />
-                        <span>{{ selectedEmoji.name }}</span>
-                    </div>
-
-                    <!-- If is emoji not selected -->
-                    <div class="not-selected" v-if="! selectedEmoji">
-                        <span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
-                    </div>
-
-                    <chevron-down-icon class="row-icon" size="19"/>
-                </div>
-
-                <!-- Emojis List -->
-                <transition name="slide-in">
-                    <div v-if="selectOpen">
-                        <!-- Spinner -->
-                        <div v-if="!loadedList" class="emoji-wrapper">
-                            <Spinner/>
-                        </div>
-
-                        <!-- List -->
-                        <div v-if="loadedList && emojis" class="emoji-wrapper">
-
-                            <!-- Search input -->
-                            <input @click.stop @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')">
-
-                            <!-- Navigation of Emojis Groups -->
-                            <ul v-show="searchInput.length < 1" class="groups-list">
-                                <li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.emojisGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}">
-                                    <Emoji :emoji="group.emoji" location="emoji-picker" />
-                                </li>
-                            </ul>
-
-                            <!-- All Emojis -->
-                            <div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box" class="group-wrapper">
-                                <div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper" :id="`group-${name}`">
-                                    <label class="group-name-label">{{ name }}</label>
-                                    <ul class="options-list">
-                                        <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i" class="option">
-                                            <Emoji :emoji="emoji" location="emoji-picker" />
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-
-                            <!-- Searched emojis -->
-                            <div v-if="searchInput.length > 0" class="group-wrapper">
-                                <div class="options-wrapper">
-                                    <ul class="options-list">
-                                        <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
-                                            <Emoji :emoji="emoji" location="emoji-picker" />
-                                        </li>
-                                    </ul>
-                                    <span class="not-found" v-if="filteredEmojis.length === 0"> {{ $t('popup_rename.emoji_list_not_found') }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </transition>
-            </div>
         </TabOption>
 
-        <!-- Colors -->
+        <!-- Colors Picker-->
         <TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
-            <div class="color-pick-wrapper">
+            <ColorPicker :picked-color="pickedColor" v-model="selectedColor"/>
-                <label class="main-label">{{ $t('popup_rename.color_pick_label') }}:</label>
-                <ul class="color-wrapper">
-                    <li v-for="(color, i) in colors" :key="i" @click="setIcon({'color': color})" class="single-color">
-                        <check-icon v-if="color === selectedColor" class="color-icon" size="22"/>
-                        <span :style="{background:color}" class="color-box"></span>
-                    </li>
-                </ul>
-            </div>
         </TabOption>
     </TabWrapper>
 </template>
 
 <script>
-import { SmileIcon, FolderIcon, ChevronDownIcon, XIcon, CheckIcon } from 'vue-feather-icons'
+import EmojiPicker from '@/components/Others/EmojiPicker'
+import ColorPicker from '@/components/Others/ColorPicker'
 import TabWrapper from '@/components/Others/TabWrapper'
 import TabOption from '@/components/Others/TabOption'
-import Spinner from '@/components/FilesView/Spinner'
-import Emoji from '@/components/Others/Emoji'
-import { groupBy } from 'lodash'
-import { mapGetters } from 'vuex'
 import { events } from '@/bus'
 
 export default {
     name: 'SetFolderIcon',
-    props: ['folderData', 'unique_id'],
+    props: [ 'folderData' ],
     components: {
-        ChevronDownIcon,
+        EmojiPicker,
+        ColorPicker,
         TabWrapper,
-        FolderIcon,
-        SmileIcon,
-        CheckIcon,
         TabOption,
-        Spinner,
-        XIcon,
-        Emoji
     },
     computed: {
-        ...mapGetters(['emojis']),
+        pickedEmoji () {
-        allEmoji() {
+            // If is color not selected and emoji is selected, push picked emoji to EmojiPicker for the EmojiSelected input
-            return groupBy(this.emojis.emojisList, 'group')
+            return !this.selectedColor && this.selectedEmoji ? this.selectedEmoji : undefined
+        },
+        pickedColor() {
+            // If is emoji not selected and color is selected, push picked color to ColorPicker
+            return !this.selectedEmoji && this.selectedColor ? this.selectedColor : undefined
         }
     },
     data() {
         return {
-            selectedEmoji: undefined,
             selectedColor: undefined,
-            searchInput: '',
+            selectedEmoji: undefined,
-            filteredEmojis: [],
-            selectOpen: false,
-            loadedList: false,
-            groupInView: 'Smileys & Emotion',
-            colors: [
-                '#41B883',
-                '#FE6F6F',
-                '#FE6F91',
-                '#FE6FC0',
-                '#FE6FF0',
-                '#DD6FFE',
-                '#AD6FFE',
-                '#7D6FFE',
-                '#6F90FE',
-                '#6FC0FE',
-                '#6FF0FE',
-                '#6FFEDD',
-                '#6FFEAD',
-                '#6FFE7D',
-                '#90FE6F',
-                '#C0FE6F',
-                '#F0FE6F',
-                '#FEDD6F',
-                '#FEAD6F',
-                '#FE7D6F',
-                '#4c4c4c',
-                '#06070B',
-            ]
         }
     },
-    methods: {
+    watch: {
-        checkGroupInView: _.debounce(function() {
+        selectedColor () {
 
-            this.emojis.emojisGroups.forEach(group => {
+            let color = {'color': this.selectedColor}
 
-                let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
+            if( this.selectedColor ) {
-                let groupBox = document.getElementById('group-box').getBoundingClientRect()
 
-                // Check if the group is in the viewport of group-box
-                if (element.top < groupBox.top && element.bottom > groupBox.top) {
-                    this.groupInView = group.name
-                }
-            })
-
-        }, 200),
-        scrollToGroup(name) {
-
-            let group = document.getElementById(`group-${name}`)
-
-            group.scrollIntoView({ behavior: 'smooth' })
-
-            this.groupInView = name
-        },
-        filterEmojis: _.debounce(function(emoji) {
-
-            this.filteredEmojis = this.emojis.emojisList.filter(emoji => emoji.name.includes(this.searchInput))
-
-        }, 800),
-        openMenu() {
-
-            this.selectOpen = !this.selectOpen
-
-            //Load emojis
-            if (this.selectOpen) {
-                this.$store.dispatch('getEmojisList').then((loaded) => {
-                    this.loadedList = loaded
-                })
-            }
-
-            if (!this.selectOpen)
-                this.loadedList = false
-
-            this.searchInput = ''
-
-            this.groupInView = 'Smileys & Emotion'
-        },
-        setIcon(value) {
-
-            // Set emoji
-            if (value.emoji) {
-                this.selectedEmoji = value.emoji
-                this.selectedColor = undefined
-            }
-
-            // Set color
-            if (value.color) {
-                this.selectedColor = value.color
                 this.selectedEmoji = undefined
+                events.$emit('setFolderIcon', color )
             }
           
-            events.$emit('setFolderIcon', { 'value': value })
-
-            this.selectOpen = false
         },
-        resetEmoji() {
+        selectedEmoji () {
 
-            this.selectedEmoji = undefined
+            let emoji = { 'emoji': this.selectedEmoji }
 
-            events.$emit('setFolderIcon', { 'value': 'default' })
+            if( this.selectedEmoji ) {
+
+                this.selectedColor = undefined
+                events.$emit('setFolderIcon', this.selectedEmoji ==='default' ? 'default' : emoji )
+            }
+        },
+    },
+    created() {
+        if(this.folderData) {
+            
+            // If folder have already set some color set this color to selected color
+            this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
+
+            // If folder have already set some emojit set this emoji to selected emoji
+            this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
         }
     },
-    mounted() {
+    destroyed () {
+        if(this.folderData) {
             
-        this.selectOpen = false
+            // After close SetFolderIcon set the saved folder icon for thumbnail
+            let color = {'color': this.folderData.icon_color }
+            let emoji = {'emoji': this.folderData.icon_emoji }
     
-        // If folder have already set some emoji set this emoji to selected emoji
+            events.$emit('setFolderIcon', this.folderData.icon_emoji ? emoji : color  )
-        this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
+        }
-
-        // If folder have already set some color set this color to selected color
-        this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
-
-        events.$on('unClick', () => {
-
-            this.selectOpen = false
-
-            this.loadedList = false
-        })
     }
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "@assets/vue-file-manager/_inapp-forms.scss";
 @import '@assets/vue-file-manager/_forms';
 
-.color-pick-wrapper {
-    .color-wrapper {
-        margin-bottom: 20px;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, 32px);
-        justify-content: space-between;
-        gap: 7px;
-
-        .single-color {
-            height: 31px;
-            list-style: none;
-            border-radius: 8px;
-            cursor: pointer;
-            position: relative;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .color-icon {
-                z-index: 2;
-
-                polyline {
-                    stroke: white;
-                }
-            }
-
-            .color-box {
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                display: block;
-            }
-        }
-    }
-}
-
-.select-emoji-wrapper {
-    margin-bottom: 20px;
-}
-
-.main-label {
-    @include font-size(14);
-    font-weight: 700;
-    margin-bottom: 8px;
-    display: block;
-}
-
-.emoji-wrapper {
-    height: 400px;
-    width: 100%;
-    position: absolute;
-    border: 1px solid transparent;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-    border-radius: 8px;
-    background: white;
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-    z-index: 10;
-    top: 152px;
-
-
-    .groups-list {
-        display: grid;
-        grid-template-columns: repeat(9, auto);
-        justify-content: space-between;
-        overflow-x: auto;
-        overflow-y: hidden;
-        height: 90px;
-
-        .active {
-            background: $light_background;
-            border-radius: 8px;
-        }
-
-        .group-option {
-            width: 45px;
-            height: 45px;
-            list-style: none;
-            padding: 6px;
-            cursor: pointer;
-
-            &:hover {
-                background: $light_background;
-                border-radius: 8px;
-            }
-        }
-    }
-
-    .emoji-input {
-        width: 100%;
-        border-radius: 8px;
-        padding: 4px;
-        margin-bottom: 20px;
-        background: $light_background;
-        border: none;
-        padding: 13px 20px;
-        font-weight: 700;
-
-        &::placeholder {
-            font-weight: 700;
-            color: $light_text;
-        }
-    }
-
-    .group-wrapper {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        overflow-y: scroll;
-        padding: 0px;
-
-        .options-wrapper {
-            display: flex;
-            flex-wrap: wrap;
-            margin-bottom: 10px;
-
-            &:last-child {
-                margin-bottom: 0px;
-            }
-
-            .options-list {
-                display: grid;
-                grid-template-columns: repeat(auto-fill, 45px);
-                justify-content: space-between;
-                width: 100%;
-            }
-
-            .group-name-label {
-                width: 100%;
-                @include font-size(14);
-                font-weight: 700;
-                margin-bottom: 10px;
-            }
-
-            .option {
-                list-style: none;
-                width: 45px;
-                height: 45px;
-                padding: 6px;
-                cursor: pointer;
-
-                &:hover {
-                    background: $light_background;
-                    border-radius: 8px;
-                }
-            }
-
-            .not-found {
-                align-self: center;
-                margin: auto;
-                font-weight: 700;
-                padding: 10px;
-                border-radius: 8px;
-                background: $light_background;
-                box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-            }
-        }
-    }
-}
-
-.select-input-wrapper {
-    height: 50px;
-    padding: 13px 20px;
-    border: 1px solid transparent;
-    border-radius: 8px;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: 1px solid transparent;
-    @include transition(150ms);
-
-    .row-icon {
-        @include transition(150ms);
-    }
-
-    &.active-menu {
-        border-color: $theme;
-        box-shadow: 0 0 7px rgba($theme, 0.3);
-
-        .row-icon {
-            transform: rotate(180deg);
-        }
-    }
-
-    .select-input {
-        @include font-size(16);
-        font-weight: 700;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .emoji-preview {
-            margin-left: 5px;
-            margin-right: 10px;
-            width: 22px;
-            height: 22px;
-        }
-
-        .select-input-icon-wrapper {
-            width: 22px;
-            height: 22px;
-            border-radius: 6px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-left: -7px;
-
-            &:hover {
-
-                .select-input-icon {
-                    line {
-                        stroke: $theme;
-                    }
-                }
-            }
-
-            .select-input-icon {
-                line {
-                    stroke: $text;
-                }
-            }
-        }
-    }
-
-    .not-selected {
-        span {
-            color: rgba($text, 0.5);
-            @include font-size(15);
-            font-weight: 700
-        }
-    }
-}
-
 .set-folder-icon {
     position: relative;
 }
-
-.slide-in-enter-active {
-    transition: all 150ms ease;
-}
-
-.slide-in-enter {
-    opacity: 0;
-    transform: translateY(-210px);
-}
-
-.slide-in-enter-to {
-    transform: translateY(-134px);
-}
-
-@media (max-width: 690px) {
-    .emoji-wrapper {
-        height: 300px;
-    }
-}
-
-@media (max-width: 336px) {
-    .emoji-wrapper {
-        top: 173px;
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .color-pick-wrapper {
-        .color-wrapper {
-            .single-color {
-                &.active-color {
-                    border: 2px solid;
-                }
-
-                &:hover {
-                    border: 2px solid $dark_mode_text_primary;
-                }
-            }
-        }
-    }
-
-    .emoji-wrapper {
-        background: $dark_mode_background;
-
-        .emoji-input {
-            background: $dark_mode_foreground;
-        }
-
-        .groups-list {
-            .active {
-                background: $dark_mode_foreground !important;
-            }
-
-            .group-option {
-                &:hover {
-                    background: $dark_mode_foreground !important;
-                }
-            }
-        }
-
-        .options-wrapper {
-            .option {
-                &:hover {
-                    background: $dark_mode_foreground !important;
-                }
-            }
-
-            .not-found {
-                background: $dark_mode_foreground !important;
-            }
-        }
-    }
-
-    .select-input-wrapper {
-        background: $dark_mode_foreground;
-
-        .not-selected {
-            span {
-                color: $dark_mode_text_secondary;
-            }
-        }
-
-        .select-input-icon-wrapper {
-            &:hover {
-                .select-input-icon {
-                    line {
-                        stroke: $theme !important;
-                    }
-                }
-            }
-
-            .select-input-icon {
-                line {
-                    stroke: $dark_mode_text_primary !important;
-                }
-            }
-        }
-    }
-}
-
 </style>

resources/js/components/Others/ShareEdit.vue

@@ -333,6 +333,7 @@
 
                 if (args.sentToEmail)
                     this.sendToRecipientsMenu = true
+                    this.isEmailSended = false
 
                 this.canChangePassword = args.item.shared.protected
             })

resources/js/store/modules/fileFunctions.js

@@ -113,7 +113,7 @@ const actions = {
 			})
 			.catch(() => Vue.prototype.$isSomethingWrong())
 	},
-	createFolder: ({ commit, getters, dispatch }, folderName) => {
+	createFolder: ({ commit, getters, dispatch }, folder) => {
 
 		// Get route
 		let route = getters.sharedDetail && !getters.sharedDetail.protected
@@ -123,7 +123,8 @@ const actions = {
 		axios
 			.post(route, {
 				parent_id: getters.currentFolder.unique_id,
-				name: folderName
+				name: folder.name,
+				icon: folder.icon
 			})
 			.then(response => {
 				commit('ADD_NEW_FOLDER', response.data)
@@ -158,7 +159,7 @@ const actions = {
 			.post(route, {
 				name: data.name,
 				type: data.type,
-				folder_icon: data.folder_icon,
+				icon: data.icon,
 				_method: 'patch'
 			})
 			.then(response => {

resources/lang/cn/vuefilemanager.php

@@ -12,6 +12,7 @@ return [
     'shared_link_email_greeting' => 'Hello!',
     'shared_link_email_user'     => ':user (:email) send you a link to shared files.',
     'shared_link_email_link'     => 'Open your files',
+    'shared_link_email_salutation'  => 'Regards, :app_name',
 
     // Reset password email
     'reset_password_greeting' => 'Hello!',

resources/lang/en/vuefilemanager.php

@@ -8,10 +8,11 @@ return [
     'home'                    => 'Home',
 
     //Shared link email message
-    'shared_link_email_subject'  => '🙋 :user share some files with you. Look at it!',
+    'shared_link_email_subject'     => '🙋 :user share some files with you. Look at it!',
-    'shared_link_email_greeting' => 'Hello!',
+    'shared_link_email_greeting'    => 'Hello!',
-    'shared_link_email_user'     => ':user (:email) send you a link to shared files.',
+    'shared_link_email_user'        => ':user (:email) send you a link to shared files.',
-    'shared_link_email_link'     => 'Open your files',
+    'shared_link_email_link'        => 'Open your files',
+    'shared_link_email_salutation'  => 'Regards, :app_name',
 
     // Reset password email
     'reset_password_greeting' => 'Hello!',

resources/lang/sk/vuefilemanager.php

@@ -12,6 +12,7 @@ return [
     'shared_link_email_greeting' => 'Ahoj!',
     'shared_link_email_user'     => ':user (:email) vám posiela odkaz pre zdieľané súbory.',
     'shared_link_email_link'     => 'Vaše súbory',
+    'shared_link_email_salutation'  => 'S pozdravom, :app_name',
 
     // Reset password email
     'reset_password_greeting' => 'Ahoj!',

resources/sass/app.scss

@@ -459,21 +459,22 @@
     width: 18px;
     height: 18px;
     cursor: pointer;
-
   }
 
   ::-webkit-scrollbar-thumb {
-      border: 6px solid white;
+      border: 6px solid transparent;
       background: #7f7f7f;
       border-radius: 25px;
+      background-clip: padding-box ;
   }
 }
 
 @media (prefers-color-scheme: dark) { 
   .windows {
     ::-webkit-scrollbar-thumb {
-      border: 6px solid $dark_mode_background;
+      border: 6px solid transparent;
       background: $dark_mode_foreground !important;
+      background-clip: padding-box !important ;
     }
   }
 }

resources/views/vendor/mail/html/button.blade.php

@@ -0,0 +1,19 @@
+<table class="action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="center">
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="center">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td>
+<a href="{{ $url }}" class="button button-{{ $color ?? 'primary' }}" target="_blank" rel="noopener">{{ $slot }}</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>

resources/views/vendor/mail/html/footer.blade.php

@@ -0,0 +1,11 @@
+<tr>
+<td>
+<table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td class="content-cell" align="center">
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+</td>
+</tr>
+</table>
+</td>
+</tr>

resources/views/vendor/mail/html/header.blade.php

@@ -0,0 +1,11 @@
+<tr>
+<td class="header">
+<a href="{{ $url }}" style="display: inline-block;">
+@if (trim($slot) === 'Laravel')
+<img src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Logo">
+@else
+{{ $slot }}
+@endif
+</a>
+</td>
+</tr>

resources/views/vendor/mail/html/layout.blade.php

@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+</head>
+<body>
+<style>
+@media only screen and (max-width: 600px) {
+.inner-body {
+width: 100% !important;
+}
+
+.footer {
+width: 100% !important;
+}
+}
+
+@media only screen and (max-width: 500px) {
+.button {
+width: 100% !important;
+}
+}
+</style>
+
+<table class="wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="center">
+<table class="content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+{{ $header ?? '' }}
+
+<!-- Email Body -->
+<tr>
+<td class="body" width="100%" cellpadding="0" cellspacing="0">
+<table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
+<!-- Body content -->
+<tr>
+<td class="content-cell">
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+
+{{ $subcopy ?? '' }}
+</td>
+</tr>
+</table>
+</td>
+</tr>
+
+{{ $footer ?? '' }}
+</table>
+</td>
+</tr>
+</table>
+</body>
+</html>

resources/views/vendor/mail/html/message.blade.php

@@ -0,0 +1,28 @@
+
+@component('mail::layout')
+{{-- Header --}}
+@slot('header')
+@component('mail::header', ['url' => config('app.url')])
+{{ get_setting('app_title') ?? 'VueFileManager' }}
+@endcomponent
+@endslot
+
+{{-- Body --}}
+{{ $slot }}
+
+{{-- Subcopy --}}
+@isset($subcopy)
+@slot('subcopy')
+@component('mail::subcopy')
+{{ $subcopy }}
+@endcomponent
+@endslot
+@endisset
+
+{{-- Footer --}}
+@slot('footer')
+@component('mail::footer')
+© {{ date('Y') }} {{ get_setting('app_title') ?? 'VueFileManager' }}. @lang('All rights reserved.')
+@endcomponent
+@endslot
+@endcomponent

resources/views/vendor/mail/html/panel.blade.php

@@ -0,0 +1,14 @@
+<table class="panel" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td class="panel-content">
+<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td class="panel-item">
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+

resources/views/vendor/mail/html/subcopy.blade.php

@@ -0,0 +1,7 @@
+<table class="subcopy" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td>
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+</td>
+</tr>
+</table>

resources/views/vendor/mail/html/table.blade.php

@@ -0,0 +1,3 @@
+<div class="table">
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+</div>

resources/views/vendor/mail/html/themes/default.css

@@ -0,0 +1,289 @@
+/* Base */
+
+body,
+body *:not(html):not(style):not(br):not(tr):not(code) {
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    position: relative;
+}
+
+body {
+    -webkit-text-size-adjust: none;
+    background-color: #ffffff;
+    color: #718096;
+    height: 100%;
+    line-height: 1.4;
+    margin: 0;
+    padding: 0;
+    width: 100% !important;
+}
+
+p,
+ul,
+ol,
+blockquote {
+    line-height: 1.4;
+    text-align: left;
+}
+
+a {
+    color: #3869d4;
+}
+
+a img {
+    border: none;
+}
+
+/* Typography */
+
+h1 {
+    color: #3d4852;
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 0;
+    text-align: left;
+}
+
+h2 {
+    font-size: 16px;
+    font-weight: bold;
+    margin-top: 0;
+    text-align: left;
+}
+
+h3 {
+    font-size: 14px;
+    font-weight: bold;
+    margin-top: 0;
+    text-align: left;
+}
+
+p {
+    font-size: 16px;
+    line-height: 1.5em;
+    margin-top: 0;
+    text-align: left;
+}
+
+p.sub {
+    font-size: 12px;
+}
+
+img {
+    max-width: 100%;
+}
+
+/* Layout */
+
+.wrapper {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    background-color: #edf2f7;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.content {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+/* Header */
+
+.header {
+    padding: 25px 0;
+    text-align: center;
+}
+
+.header a {
+    color: #3d4852;
+    font-size: 19px;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+/* Logo */
+
+.logo {
+    height: 75px;
+    width: 75px;
+}
+
+/* Body */
+
+.body {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    background-color: #edf2f7;
+    border-bottom: 1px solid #edf2f7;
+    border-top: 1px solid #edf2f7;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.inner-body {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 570px;
+    background-color: #ffffff;
+    border-color: #e8e5ef;
+    border-radius: 2px;
+    border-width: 1px;
+    box-shadow: 0 2px 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015);
+    margin: 0 auto;
+    padding: 0;
+    width: 570px;
+}
+
+/* Subcopy */
+
+.subcopy {
+    border-top: 1px solid #e8e5ef;
+    margin-top: 25px;
+    padding-top: 25px;
+}
+
+.subcopy p {
+    font-size: 14px;
+}
+
+/* Footer */
+
+.footer {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 570px;
+    margin: 0 auto;
+    padding: 0;
+    text-align: center;
+    width: 570px;
+}
+
+.footer p {
+    color: #b0adc5;
+    font-size: 12px;
+    text-align: center;
+}
+
+.footer a {
+    color: #b0adc5;
+    text-decoration: underline;
+}
+
+/* Tables */
+
+.table table {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    margin: 30px auto;
+    width: 100%;
+}
+
+.table th {
+    border-bottom: 1px solid #edeff2;
+    margin: 0;
+    padding-bottom: 8px;
+}
+
+.table td {
+    color: #74787e;
+    font-size: 15px;
+    line-height: 18px;
+    margin: 0;
+    padding: 10px 0;
+}
+
+.content-cell {
+    max-width: 100vw;
+    padding: 32px;
+}
+
+/* Buttons */
+
+.action {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    margin: 30px auto;
+    padding: 0;
+    text-align: center;
+    width: 100%;
+}
+
+.button {
+    -webkit-text-size-adjust: none;
+    border-radius: 4px;
+    color: #fff;
+    display: inline-block;
+    overflow: hidden;
+    text-decoration: none;
+}
+
+.button-blue,
+.button-primary {
+    background-color: #2d3748;
+    border-bottom: 8px solid #2d3748;
+    border-left: 18px solid #2d3748;
+    border-right: 18px solid #2d3748;
+    border-top: 8px solid #2d3748;
+}
+
+.button-green,
+.button-success {
+    background-color: #48bb78;
+    border-bottom: 8px solid #48bb78;
+    border-left: 18px solid #48bb78;
+    border-right: 18px solid #48bb78;
+    border-top: 8px solid #48bb78;
+}
+
+.button-red,
+.button-error {
+    background-color: #e53e3e;
+    border-bottom: 8px solid #e53e3e;
+    border-left: 18px solid #e53e3e;
+    border-right: 18px solid #e53e3e;
+    border-top: 8px solid #e53e3e;
+}
+
+/* Panels */
+
+.panel {
+    border-left: #2d3748 solid 4px;
+    margin: 21px 0;
+}
+
+.panel-content {
+    background-color: #edf2f7;
+    color: #718096;
+    padding: 16px;
+}
+
+.panel-content p {
+    color: #718096;
+}
+
+.panel-item {
+    padding: 0;
+}
+
+.panel-item p:last-of-type {
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+/* Utilities */
+
+.break-all {
+    word-break: break-all;
+}

resources/views/vendor/mail/text/button.blade.php

@@ -0,0 +1 @@
+{{ $slot }}: {{ $url }}

resources/views/vendor/mail/text/footer.blade.php

@@ -0,0 +1 @@
+{{ $slot }}

resources/views/vendor/mail/text/header.blade.php

@@ -0,0 +1 @@
+[{{ $slot }}]({{ $url }})

resources/views/vendor/mail/text/layout.blade.php

@@ -0,0 +1,9 @@
+{!! strip_tags($header) !!}
+
+{!! strip_tags($slot) !!}
+@isset($subcopy)
+
+{!! strip_tags($subcopy) !!}
+@endisset
+
+{!! strip_tags($footer) !!}

resources/views/vendor/mail/text/message.blade.php

@@ -0,0 +1,27 @@
+@component('mail::layout')
+    {{-- Header --}}
+    @slot('header')
+        @component('mail::header', ['url' => config('app.url')])
+            {{ config('app.name') }}
+        @endcomponent
+    @endslot
+
+    {{-- Body --}}
+    {{ $slot }}
+
+    {{-- Subcopy --}}
+    @isset($subcopy)
+        @slot('subcopy')
+            @component('mail::subcopy')
+                {{ $subcopy }}
+            @endcomponent
+        @endslot
+    @endisset
+
+    {{-- Footer --}}
+    @slot('footer')
+        @component('mail::footer')
+            © {{ date('Y') }} {{ config('app.name') }}. @lang('All rights reserved.')
+        @endcomponent
+    @endslot
+@endcomponent

resources/views/vendor/mail/text/panel.blade.php

@@ -0,0 +1 @@
+{{ $slot }}

resources/views/vendor/mail/text/subcopy.blade.php

@@ -0,0 +1 @@
+{{ $slot }}

resources/views/vendor/mail/text/table.blade.php

@@ -0,0 +1 @@
+{{ $slot }}