Create Folder - ContextMenu,add X icon for rename popup input, Dekstoptolbar icons,Recent uploads sorting,Windows scroller in nav sidebar,Change color of Delere in context menu

resources/js/components/Others/RenameItem.vue

@@ -15,7 +15,12 @@
                 <!--Set password-->
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
                     <label class="input-label">{{ $t('popup_rename.label') }}:</label>
-                    <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" :placeholder="$t('popup_rename.placeholder')">
+                    <div class="input">
+                        <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" :placeholder="$t('popup_rename.placeholder')">
+                        <div @click="pickedItem.name = ''" class="close-icon-wrapper">
+                            <x-icon class="close-icon" size="14"/>
+                        </div>
+                    </div>
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
@@ -57,6 +62,7 @@
     import ThumbnailItem from '@/components/Others/ThumbnailItem'
     import ActionButton from '@/components/Others/ActionButton'
     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'
@@ -75,6 +81,7 @@
             PopupHeader,
             ButtonBase,
             required,
+            XIcon,
         },
         computed: {
             itemTypeTitle() {
@@ -147,7 +154,60 @@
     @import "@assets/vue-file-manager/_inapp-forms.scss";
     @import '@assets/vue-file-manager/_forms';
 
+    .input {
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        .close-icon-wrapper {
+            width: 22px;
+            height: 22px;
+            position: absolute;
+            cursor: pointer;
+            right: 21px;
+            border-radius: 6px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &:hover {
+                background: $light_background;
+                .close-icon {
+                    line {
+                    stroke: $theme;
+                    }
+                }
+            }            
+
+            .close-icon {
+                line {
+                stroke: rgba($text-muted, 0.3);
+                }
+            }
+        }
+
+        
+    }
+
     .item-thumbnail {
         margin-bottom: 20px;
     }
+
+    @media (prefers-color-scheme: dark) {
+       .close-icon-wrapper {
+            &:hover {
+                background: rgba($theme, 0.1) !important;
+                .close-icon {
+                    line {
+                        stroke: $theme !important;
+                    }
+                }
+            }
+            .close-icon {
+                line {
+                    stroke: rgba($dark_mode_text_primary, 0.3) !important;
+                }
+            }            
+       }
+    }
 </style>

resources/js/components/Others/SetFolderIcon.vue

@@ -60,13 +60,21 @@
 
 <script>
     import {SmileIcon, FolderIcon, ChevronDownIcon   } from 'vue-feather-icons'
+    import TableWrapper from '@/components/Others/TableWrapper'
+    import TableOption from '@/components/Others/TableOption'
     import emojis from '../../emoji.json'
     import {events} from '@/bus'
 
     export default {
         name: "SetFolderIcon",
         props: ['folderData', 'unique_id'],
-        components: {SmileIcon, FolderIcon, ChevronDownIcon },
+        components: {
+            ChevronDownIcon ,
+            TableWrapper,
+            TableOption,
+            FolderIcon,
+            SmileIcon,
+        },
         computed: {
             allEmoji() {
                 let emojisList = this.emojis

resources/js/components/Others/ShareCreate.vue

@@ -25,6 +25,11 @@
                 <div class="successfully-send"> {{$t('shared_form.email_successfully_send_message')}} </div>
             </div>
 
+            <div class="info-box">
+                <InfoBox >
+                    {{$t('shared_form.email_successfully_send_message')}}
+                </InfoBox>
+            </div>
 
 
             <!--Form to set sharing-->
@@ -111,7 +116,10 @@
     import ThumbnailItem from '@/components/Others/ThumbnailItem'
     import ActionButton from '@/components/Others/ActionButton'
     import CopyInput from '@/components/Others/Forms/CopyInput'
+    import TableWrapper from '@/components/Others/TableWrapper'
+    import TableOption from '@/components/Others/TableOption'
     import ButtonBase from '@/components/FilesView/ButtonBase'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
     import {LinkIcon, MailIcon } from 'vue-feather-icons'
     import {required} from 'vee-validate/dist/rules'
     import {mapGetters} from 'vuex'
@@ -128,6 +136,8 @@
             ActionButton,
             PopupWrapper,
             PopupActions,
+            TableWrapper,
+            TableOption,
             PopupContent,
             PopupHeader,
             EmailsInput,
@@ -137,7 +147,8 @@
             CopyInput,
             MailIcon, 
             required,
-            LinkIcon
+            LinkIcon,
+            InfoBox
         },
         computed: {
             ...mapGetters([
@@ -265,6 +276,15 @@
     @import "@assets/vue-file-manager/_inapp-forms.scss";
     @import '@assets/vue-file-manager/_forms';
 
+    .info-box {
+        padding: 0px 20px;
+        /deep/.info-box {
+            height: 40px;
+            display: flex;
+            align-items: center;
+        }
+    }
+
     .successfully-send-wrapper {
         padding: 0px 20px;
         margin-bottom: 20px;

resources/js/components/Others/TableOption.vue

@@ -0,0 +1,68 @@
+<template>
+    <div :class="{'active' : active}"> 
+        <div class="wrapper">
+            <mail-icon v-if="icon === 'email'" class="icon" size="17"/> 
+            <link-icon v-if="icon === 'link'" class="icon" size="17"/>
+            <smile-icon v-if="icon === 'emoji'" class="icon" size="17"/>
+            <folder-icon v-if="icon === 'folder'" class="icon" size="17"/>
+            <b>{{title}}</b>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {
+        LinkIcon,
+        MailIcon,
+        SmileIcon,
+        FolderIcon } from 'vue-feather-icons'
+
+    export default {
+        name: "TableOption",
+        props: ['title', 'icon', 'active'],
+        components: {
+            LinkIcon,
+            MailIcon,
+            SmileIcon,
+            FolderIcon
+        }
+        
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .icon {
+            margin-right: 10px;
+            path,
+            polyline {
+                color: $theme !important;
+            }
+        }
+     .active {
+            background: $text;
+                b {
+                    color: $light_background !important;
+                }
+        }
+
+    @media (prefers-color-scheme: dark) {
+        
+        .active {
+            background: $dark_mode_text_primary;
+                h1 {
+                    color: $dark_mode_foreground !important;
+                }
+        }
+    }
+
+</style>

resources/js/components/Others/TableWrapper.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="table-wrapper">
+        <slot>
+            <child @click="setTab"></child>
+        </slot>
+    </div>
+</template>
+
+<script>
+    import TableOption from '@/components/Others/TableOption'
+    export default {
+        name: "TableWrapper",
+        components: {TableOption},
+        data () {
+            return {
+                tabList: []
+            }
+        },
+        methods: {
+            setTab(tab){
+                console.log('setTab')
+                this.$children.find(child => child._props.title === tab)
+            }
+        },
+        mounted () {
+            this.$children.map(child => {
+                this.tabList.push(child._props.title)
+            })
+            console.log(this.$children)
+        }
+        
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .table-wrapper {
+        display: flex;
+        justify-content: center;
+        padding: 0px 20px;
+        margin-bottom: 20px;
+        cursor: pointer;
+        
+        & > * {
+            width: 100%;
+            height: 42px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: $light_background;
+            color: $text;
+        }
+        & > :first-child {
+            border-top-left-radius: 8px;
+            border-bottom-left-radius: 8px;
+        }
+        & > :last-child {
+            border-top-right-radius: 8px;
+            border-bottom-right-radius: 8px;
+        }
+        
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .table-wrapper {   
+            & > * {
+                background: $dark_mode_foreground;
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+
+</style>