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

popup header refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-22 14:05:22 +01:00
parent f5e45126db
commit a7fd410a68
5 changed files with 73 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
resources/js/components/FilesView/Option.vue
View File

@@ -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}"/>

63
resources/js/components/Others/Popup/PopupContent.vue
View File

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

110
resources/js/components/Others/Popup/PopupHeader.vue
View File

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