v1.5-alpha.1

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

@@ -1,26 +1,58 @@
 <template>
     <div class="popup-header">
-        <h1 class="title">{{ title }}</h1>
+        <div class="icon">
+            <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon"></corner-down-right-icon>
+            <link-icon v-if="icon === 'share'" size="17" class="title-icon"></link-icon>
+        </div>
+        <div class="label">
+            <h1 class="title">{{ title }}</h1>
+            <x-icon @click="closePopup" size="22" class="close-icon"></x-icon>
+        </div>
     </div>
 </template>
 
 <script>
+    import { CornerDownRightIcon, LinkIcon, XIcon } from 'vue-feather-icons'
+    import {events} from '@/bus'
+
     export default {
         name: 'PopupHeader',
         props: [
-            'title'
-        ]
+            'title', 'icon'
+        ],
+        components: {
+            CornerDownRightIcon,
+            LinkIcon,
+            XIcon,
+        },
+        methods: {
+            closePopup() {
+                events.$emit('popup:close')
+            }
+        }
     }
 </script>
 
 <style lang="scss" scoped>
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .popup-header {
         padding: 20px;
+        display: flex;
+        align-items: center;
+
+        .icon {
+            margin-right: 10px;
+            line-height: 0;
+
+            path, line, polyline, rect, circle {
+                stroke: $theme;
+            }
+        }
 
         .title {
-            @include font-size(18);
+            @include font-size(17);
             font-weight: 700;
             color: $text;
         }
@@ -30,6 +62,27 @@
             color: #8b8f9a;
             margin-top: 5px;
         }
+
+        .label {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            align-items: center;
+
+            .close-icon {
+                padding: 1px 4px;
+                border-radius: 6px;
+
+                &:hover {
+                    background: $light_background;
+
+                    line {
+                        stroke: $theme;
+                    }
+                }
+                cursor: pointer;
+            }
+        }
     }
 
     .small {
@@ -38,6 +91,10 @@
         }
     }
 
+    @media only screen and (max-width: 690px) {
+
+    }
+
     @media (prefers-color-scheme: dark) {
         .popup-header {
             .title {