popup header refactoring

2026-05-03 20:55:59 +00:00 · 2022-01-22 14:05:22 +01:00
parent f5e45126db
commit a7fd410a68
5 changed files with 73 additions and 151 deletions
@@ -10,11 +10,11 @@
    "/chunks/admin~chunks/app-language~chunks/files~chunks/my-shared-items~chunks/pages~chunks/plans~chunk~31d2e0e5.js": "/chunks/admin~chunks/app-language~chunks/files~chunks/my-shared-items~chunks/pages~chunks/plans~chunk~31d2e0e5.js?id=45350439fb9bcb879f5b",
    "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.js": "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.js?id=0ae7b3d840e0e20fe358",
    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js?id=34845d890e9e65d2adc0",
-    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js?id=fbcd637cfcb8e85a32a5",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js?id=5c5bc6be2a45f4144bd4",
    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js?id=510e6c1b1017a73a40a6",
    "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=354c892546e5c369a749",
    "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=d0f80fceb2f27a39b283",
-    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=f21db1585684bdd117bf",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=23ad9dd1fabccdd4c44b",
    "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=e40dcf843c95a51cd397",
    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=1d5319a48a28f62bb131",
    "/chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunks/payments/billings~c~dd421a96.js": "/chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunks/payments/billings~c~dd421a96.js?id=91eea8e08d675f1a84d2",
@@ -42,7 +42,7 @@
    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=cb6691f996a6ea765b4d",
    "/chunks/files.js": "/chunks/files.js?id=f0a4d97bafb958087749",
    "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js?id=f41b30739fcbba3ae537",
-    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js?id=8e99382e3e00d2ef3ef8",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js?id=cc81caddf2638d4db1d6",
    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js?id=6489d55d6d88986008c9",
    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=7fe909d93242299552ec",
    "/chunks/homepage.js": "/chunks/homepage.js?id=6a14173a7751010222ed",
@@ -595,5 +595,44 @@
    "/chunks/admin~chunks/platform~chunks/settings.6436a313ee65b3d2eb98.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings.6436a313ee65b3d2eb98.hot-update.js",
    "/chunks/admin~chunks/platform~chunks/settings.b79bd1a56181d1876334.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings.b79bd1a56181d1876334.hot-update.js",
    "/chunks/admin~chunks/platform~chunks/settings.a96eaf3141b28d775617.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings.a96eaf3141b28d775617.hot-update.js",
-    "/chunks/admin~chunks/platform~chunks/settings.4e5883645eced12bb736.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings.4e5883645eced12bb736.hot-update.js"
+    "/chunks/admin~chunks/platform~chunks/settings.4e5883645eced12bb736.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings.4e5883645eced12bb736.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e0f0ae44f0d6eafb8e29.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e0f0ae44f0d6eafb8e29.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.69660a981a7f05a66ab5.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.69660a981a7f05a66ab5.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4bc4183d950cdda49f48.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4bc4183d950cdda49f48.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.46721aee530dd03fbb56.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.46721aee530dd03fbb56.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f0324f9486d9359c9ada.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f0324f9486d9359c9ada.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.18a6c3cbdb25d406f971.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.18a6c3cbdb25d406f971.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.5a4899642221345ba3b8.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.5a4899642221345ba3b8.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.9779d15e054dc7d14e93.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.9779d15e054dc7d14e93.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.84e5287ff38a0e086d3e.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.84e5287ff38a0e086d3e.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.43d5eb96800d48eacfc8.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.43d5eb96800d48eacfc8.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.2f03ea4ba4062c52c9f0.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.2f03ea4ba4062c52c9f0.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f356153bd1bd56d5e0de.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f356153bd1bd56d5e0de.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.239deff1d30169182e68.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.239deff1d30169182e68.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.5a185b788a2abcf8e8d2.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.5a185b788a2abcf8e8d2.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3831a77fe72fa682e31f.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3831a77fe72fa682e31f.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.9ae2d695b731f0af4fe2.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.9ae2d695b731f0af4fe2.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3ca9efea59c0cac92c65.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3ca9efea59c0cac92c65.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.110d4a0f2c2a8840a104.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.110d4a0f2c2a8840a104.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.27dc998d942faf6ee74e.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.27dc998d942faf6ee74e.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.2ef04058d81efb6a302f.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.2ef04058d81efb6a302f.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.28ea470a8444a71111e3.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.28ea470a8444a71111e3.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.48e7bd769f3783989bb2.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.48e7bd769f3783989bb2.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.75376a19c1bcbc826340.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.75376a19c1bcbc826340.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.08d576fe6ddefc7c98cb.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.08d576fe6ddefc7c98cb.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.57f8cd48e59303487ac1.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.57f8cd48e59303487ac1.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a45cb7b792e5eef4b2a5.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a45cb7b792e5eef4b2a5.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.1d0aa3673fc1dfe4b6f2.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.1d0aa3673fc1dfe4b6f2.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.9634e469c1243a940aa9.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.9634e469c1243a940aa9.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.0e1d53720b828b883b01.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.0e1d53720b828b883b01.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.88e5bc18a4964959106d.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.88e5bc18a4964959106d.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.06a75ee94a1c09c3bada.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.06a75ee94a1c09c3bada.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d7f70ebb6b707da913f3.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d7f70ebb6b707da913f3.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.25aab073ab7bbb212d8a.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.25aab073ab7bbb212d8a.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.948e8b2eff9eb71fe583.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.948e8b2eff9eb71fe583.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.701fb112d5a71b54bb7c.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.701fb112d5a71b54bb7c.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b33fe0b858a3cf9fb73d.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b33fe0b858a3cf9fb73d.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.9d5bbb19756862ec9257.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.9d5bbb19756862ec9257.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.e8bb1fe1d46b00ef0a1a.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.e8bb1fe1d46b00ef0a1a.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.68592f6b2dfabdf43ec0.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.68592f6b2dfabdf43ec0.hot-update.js"
 }
@@ -3,7 +3,7 @@
 		v-show="isVisible"
 		:style="{top: positionY + 'px', left: positionX + 'px'}"
 		@click="closeAndResetContextMenu"
-		class="absolute w-60 shadow-lg rounded-xl z-20 bg-white overflow-hidden"
+		class="absolute w-60 shadow-lg rounded-xl z-20 dark:bg-2x-dark-foreground bg-white overflow-hidden"
 		ref="contextmenu"
 	>
        <div id="menu-list" class="w-full">
@@ -1,5 +1,5 @@
 <template>
-    <li class="2xl:py-4 xl:py-3 lg:py-2.5 py-4 px-5 flex items-center" :class="{'hover:bg-light-background cursor-pointer group': ! isHoverDisabled}">
+    <li class="2xl:py-4 xl:py-3 lg:py-2.5 py-4 px-5 flex items-center" :class="{'dark:hover:bg-4x-dark-foreground hover:bg-light-background cursor-pointer group': ! isHoverDisabled}">
        <div class="mr-4">
            <calendar-icon v-if="icon === 'calendar'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
            <grid-icon v-if="icon === 'grid'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
@@ -1,58 +1,17 @@
 <template>
-    <div class="popup-content px-6" :class="type">
-        <slot></slot>
+    <div
+		:class="type"
+		class="md:relative md:top-0 md:bottom-0 absolute top-14 bottom-24 left-0 right-0 h-auto overflow-y-auto overflow-x-auto px-6"
+	>
+        <slot />
    </div>
 </template>

 <script>
    export default {
-        name: 'PopupContent',
-        props: [
-            'type'
-        ]
-    }
-</script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    @media only screen and (max-width: 690px) {
-        .popup-content {
-            top: 57px;
-            bottom: 72px;
-            position: absolute;
-            left: 0;
-            right: 0;
-            height: initial;
-			overflow-y: auto;
-			overflow-x: hidden;
-        }
-    }
-
-    @media only screen and (max-width: 320px) {
-        .popup-content {
-            position: unset;
-        }
-    }
-
-    @keyframes popup-in {
-        0% {
-            opacity: 0;
-            transform: scale(0.7);
-        }
-        100% {
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-
-    @keyframes popup-slide-in {
-        0% {
-            transform: translateY(100%);
-        }
-        100% {
-            transform: translateY(0);
-        }
-    }
-</style>
+		name: 'PopupContent',
+		props: [
+			'type'
+		]
+	}
+</script>
@@ -1,17 +1,22 @@
 <template>
-    <div class="popup-header p-6">
-        <div class="icon">
-            <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon text-theme dark-text-theme" />
-            <share-icon v-if="icon === 'share'" size="17" class="title-icon text-theme dark-text-theme" />
-            <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon text-theme dark-text-theme" />
-            <key-icon v-if="icon === 'key'" size="17" class="title-icon text-theme dark-text-theme" />
-            <users-icon v-if="icon === 'users'" size="17" class="title-icon text-theme dark-text-theme" />
-            <user-plus-icon v-if="icon === 'user-plus'" size="17" class="title-icon text-theme dark-text-theme" />
-            <credit-card-icon v-if="icon === 'credit-card'" size="17" class="title-icon text-theme dark-text-theme" />
+    <div class="flex items-center justify-between px-6 pt-6 pb-6">
+        <div class="flex items-center">
+			<div class="mr-3">
+				<corner-down-right-icon v-if="icon === 'move'" size="18" class="vue-feather text-theme" />
+				<share-icon v-if="icon === 'share'" size="18" class="vue-feather text-theme" />
+				<edit2-icon v-if="icon === 'edit'" size="18" class="vue-feather text-theme" />
+				<key-icon v-if="icon === 'key'" size="18" class="vue-feather text-theme" />
+				<users-icon v-if="icon === 'users'" size="18" class="vue-feather text-theme" />
+				<user-plus-icon v-if="icon === 'user-plus'" size="18" class="vue-feather text-theme" />
+				<credit-card-icon v-if="icon === 'credit-card'" size="18" class="vue-feather text-theme" />
+			</div>
+
+            <b class="font-bold text-base">
+				{{ title }}
+			</b>
        </div>
-        <div class="label">
-            <h1 class="title">{{ title }}</h1>
-            <x-icon @click="closePopup" size="22" class="close-icon hover-text-theme" />
+        <div @click="closePopup" class="cursor-pointer">
+            <x-icon size="14" class="hover-text-theme vue-feather" />
        </div>
    </div>
 </template>
@@ -43,84 +48,3 @@
        }
    }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .popup-header {
-        display: flex;
-        align-items: center;
-
-        .icon {
-            margin-right: 10px;
-            line-height: 0;
-
-            path, line, polyline, rect, circle {
-                color: inherit;
-            }
-        }
-
-        .title {
-            @include font-size(17);
-            font-weight: 700;
-            color: $text;
-        }
-
-        .message {
-            @include font-size(16);
-            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 {
-                        color: inherit;
-                    }
-                }
-
-                cursor: pointer;
-            }
-        }
-    }
-
-    @media only screen and (max-width: 690px) {
-        .popup-header {
-            padding: 15px;
-        }
-    }
-
-    .dark {
-        .popup-header {
-            .label {
-                .close-icon {
-                    &:hover {
-                        background: $dark_mode_foreground;
-                    }
-
-                    cursor: pointer;
-                }
-            }
-
-            .title {
-                color: $dark_mode_text_primary;
-            }
-
-            .message {
-                color: $dark_mode_text_secondary;
-            }
-        }
-    }
-</style>