nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-17 15:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
# Conflicts:
#	app/Http/Controllers/FileFunctions/EditItemsController.php
#	config/vuefilemanager.php
#	public/mix-manifest.json
This commit is contained in:
Peter Papp
2021-02-27 09:25:00 +01:00
parent 6736afaefb 7dd4e65d77
commit f38b265ba7
35 changed files with 1224 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/Http/Controllers/FileFunctions/EditItemsController.php
View File

@@ -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

6
app/Http/Tools/Demo.php
View File

@@ -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_color = $request->folder_icon['color'] ?? null;
$item->icon_emoji = $request->icon['emoji'] ?? null;
$item->icon_color = $request->icon['color'] ?? null;
return $item;

16
app/Http/Tools/Editor.php
View File

@@ -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'])) {
$folder->icon_emoji = $folder_icon['emoji'];
if (isset($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

5
app/Notifications/ResetPassword.php
View File

@@ -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);
}
/**

3
app/Notifications/SharedSendViaEmail.php
View File

@@ -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']));
}
/**

4
resources/js/components/FilesView/ContextMenu.vue
View File

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

128
resources/js/components/Others/ColorPicker.vue Normal file
View File

@@ -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>

27
resources/js/components/Others/CreateFolder.vue
View File

@@ -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>

497
resources/js/components/Others/EmojiPicker.vue Normal file
View File

@@ -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>

3
resources/js/components/Others/Popup/PopupWrapper.vue
View File

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

7
resources/js/components/Others/RenameItem.vue
View File

@@ -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
})
}
}

596
resources/js/components/Others/SetFolderIcon.vue
View File

@@ -1,595 +1,101 @@
<template>
<TabWrapper class="set-folder-icon">
<!-- Emojis -->
<TabOption :selected="true" id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
<div class="select-emoji-wrapper">
<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>
<!-- Emojis Picker -->
<TabOption :selected="true" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
<EmojiPicker :picked-emoji="pickedEmoji" v-model="selectedEmoji" />
</TabOption>
<!-- Colors -->
<!-- Colors Picker-->
<TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
<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="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>
<ColorPicker :picked-color="pickedColor" v-model="selectedColor"/>
</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']),
allEmoji() {
return groupBy(this.emojis.emojisList, 'group')
pickedEmoji () {
// If is color not selected and emoji is selected, push picked emoji to EmojiPicker for the EmojiSelected input
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: '',
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',
]
selectedEmoji: undefined,
}
},
methods: {
checkGroupInView: _.debounce(function() {
watch: {
selectedColor () {
this.emojis.emojisGroups.forEach(group => {
let color = {'color': this.selectedColor}
let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
let groupBox = document.getElementById('group-box').getBoundingClientRect()
if( this.selectedColor ) {
// 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() {
this.selectOpen = false
// If folder have already set some emoji set this emoji to selected emoji
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
})
destroyed () {
if(this.folderData) {
// After close SetFolderIcon set the saved folder icon for thumbnail
let color = {'color': this.folderData.icon_color }
let emoji = {'emoji': this.folderData.icon_emoji }
events.$emit('setFolderIcon', this.folderData.icon_emoji ? emoji : color )
}
}
}
</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>

1
resources/js/components/Others/ShareEdit.vue
View File

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

7
resources/js/store/modules/fileFunctions.js vendored
View File

@@ -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 => {

1
resources/lang/cn/vuefilemanager.php
View File

@@ -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!',

9
resources/lang/en/vuefilemanager.php
View File

@@ -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_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_subject' => '🙋 :user share some files with you. Look at it!',
'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!',

1
resources/lang/sk/vuefilemanager.php
View File

@@ -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!',

7
resources/sass/app.scss vendored
View File

@@ -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 ;
}
}
}

19
resources/views/vendor/mail/html/button.blade.php vendored Normal file
View File

@@ -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>

11
resources/views/vendor/mail/html/footer.blade.php vendored Normal file
View File

@@ -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>

11
resources/views/vendor/mail/html/header.blade.php vendored Normal file
View File

@@ -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>

54
resources/views/vendor/mail/html/layout.blade.php vendored Normal file
View File

@@ -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>

28
resources/views/vendor/mail/html/message.blade.php vendored Normal file
View File

@@ -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

14
resources/views/vendor/mail/html/panel.blade.php vendored Normal file
View File

@@ -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>

7
resources/views/vendor/mail/html/subcopy.blade.php vendored Normal file
View File

@@ -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>

3
resources/views/vendor/mail/html/table.blade.php vendored Normal file
View File

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

289
resources/views/vendor/mail/html/themes/default.css vendored Normal file
View File

@@ -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;
}

1
resources/views/vendor/mail/text/button.blade.php vendored Normal file
View File

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

1
resources/views/vendor/mail/text/footer.blade.php vendored Normal file
View File

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

1
resources/views/vendor/mail/text/header.blade.php vendored Normal file
View File

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

9
resources/views/vendor/mail/text/layout.blade.php vendored Normal file
View File

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

27
resources/views/vendor/mail/text/message.blade.php vendored Normal file
View File

@@ -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

1
resources/views/vendor/mail/text/panel.blade.php vendored Normal file
View File

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

1
resources/views/vendor/mail/text/subcopy.blade.php vendored Normal file
View File

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

1
resources/views/vendor/mail/text/table.blade.php vendored Normal file
View File

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