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

MobileActionButton refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-23 11:05:53 +01:00
parent 1f48abae0f
commit 1c16f0001c
2 changed files with 152 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
resources/js/components/FilesView/MobileActionButton.vue
View File

@@ -1,32 +1,32 @@
<template>
<button class="mobile-action-button">
<div class="flex">
<hard-drive-icon v-if="icon === 'hard-drive'" size="15" class="icon dark-text-theme" />
<upload-cloud-icon v-if="icon === 'upload-cloud'" size="15" class="icon dark-text-theme" />
<link-icon v-if="icon === 'share'" size="15" class="icon dark-text-theme" />
<trash2-icon v-if="icon === 'trash2'" size="15" class="icon dark-text-theme" />
<users-icon v-if="icon === 'users'" size="15" class="icon dark-text-theme" />
<user-check-icon v-if="icon === 'user-check'" size="15" class="icon dark-text-theme" />
<button class="inline-block dark:bg-2x-dark-foreground bg-light-background rounded-xl py-2 px-3.5 mr-2">
<div class="flex items-center">
<hard-drive-icon v-if="icon === 'hard-drive'" size="15" class="vue-feather dark-text-theme" />
<upload-cloud-icon v-if="icon === 'upload-cloud'" size="15" class="vue-feather dark-text-theme" />
<link-icon v-if="icon === 'share'" size="15" class="vue-feather dark-text-theme" />
<trash2-icon v-if="icon === 'trash2'" size="15" class="vue-feather dark-text-theme" />
<users-icon v-if="icon === 'users'" size="15" class="vue-feather dark-text-theme" />
<user-check-icon v-if="icon === 'user-check'" size="15" class="vue-feather dark-text-theme" />
<search-icon v-if="icon === 'search'" size="15" class="vue-feather dark-text-theme" />
<refresh-cw-icon v-if="icon === 'refresh'" size="15" class="vue-feather dark-text-theme" />
<download-icon v-if="icon === 'download'" size="15" class="vue-feather dark-text-theme" />
<copy-icon v-if="icon === 'copy'" size="15" class="vue-feather dark-text-theme" />
<filter-icon v-if="icon === 'filter'" size="15" class="vue-feather dark-text-theme" />
<credit-card-icon v-if="icon === 'credit-card'" size="15" class="vue-feather dark-text-theme" />
<folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="vue-feather dark-text-theme" />
<list-icon v-if="icon === 'th-list'" size="15" class="vue-feather dark-text-theme" />
<trash-icon v-if="icon === 'trash'" size="15" class="vue-feather dark-text-theme" />
<grid-icon v-if="icon === 'th'" size="15" class="vue-feather dark-text-theme" />
<user-plus-icon v-if="icon === 'user-plus'" size="15" class="vue-feather dark-text-theme" />
<plus-icon v-if="icon === 'plus'" size="15" class="vue-feather dark-text-theme" />
<check-square-icon v-if="icon === 'check-square'" size="15" class="vue-feather dark-text-theme" />
<x-square-icon v-if="icon === 'x-square'" size="15" class="vue-feather dark-text-theme" />
<check-icon v-if="icon === 'check'" size="15" class="vue-feather dark-text-theme" />
<dollar-sign-icon v-if="icon === 'dollar-sign'" size="15" class="vue-feather dark-text-theme" />
<sorting-icon v-if="icon === 'preview-sorting'" class="vue-feather dark-text-theme preview-sorting" />
<cloud-plus-icon v-if="icon === 'cloud-plus'" class="vue-feather dark-text-theme preview-sorting" />
<search-icon v-if="icon === 'search'" size="15" class="icon dark-text-theme" />
<refresh-cw-icon v-if="icon === 'refresh'" size="15" class="icon dark-text-theme" />
<download-icon v-if="icon === 'download'" size="15" class="icon dark-text-theme" />
<copy-icon v-if="icon === 'copy'" size="15" class="icon dark-text-theme" />
<filter-icon v-if="icon === 'filter'" size="15" class="icon dark-text-theme" />
<credit-card-icon v-if="icon === 'credit-card'" size="15" class="icon dark-text-theme" />
<folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="icon dark-text-theme" />
<list-icon v-if="icon === 'th-list'" size="15" class="icon dark-text-theme" />
<trash-icon v-if="icon === 'trash'" size="15" class="icon dark-text-theme" />
<grid-icon v-if="icon === 'th'" size="15" class="icon dark-text-theme" />
<user-plus-icon v-if="icon === 'user-plus'" size="15" class="icon dark-text-theme" />
<plus-icon v-if="icon === 'plus'" size="15" class="icon dark-text-theme" />
<check-square-icon v-if="icon === 'check-square'" size="15" class="icon dark-text-theme" />
<x-square-icon v-if="icon === 'x-square'" size="15" class="icon dark-text-theme" />
<check-icon v-if="icon === 'check'" size="15" class="icon dark-text-theme" />
<dollar-sign-icon v-if="icon === 'dollar-sign'" size="15" class="icon dark-text-theme" />
<sorting-icon v-if="icon === 'preview-sorting'" class="icon dark-text-theme preview-sorting" />
<cloud-plus-icon v-if="icon === 'cloud-plus'" class="icon dark-text-theme preview-sorting" />
<span v-if="$slots.default" class="label">
<span v-if="$slots.default" class="font-bold text-sm ml-2">
<slot></slot>
</span>
</div>
@@ -71,57 +71,3 @@
}
}
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.mobile-action-button {
background: $light_background;
margin-right: 8px;
border-radius: 8px;
padding: 7px 14px;
cursor: pointer;
border: none;
@include transition(150ms);
.flex {
display: flex;
align-items: center;
}
.icon {
@include font-size(14);
path, line, polyline, rect, circle, polygon {
@include transition(150ms);
}
}
.label {
@include transition(150ms);
@include font-size(14);
font-weight: 700;
color: $text;
padding-left: 10px;
}
&:active {
@include transform(scale(0.95));
}
}
.dark {
.mobile-action-button {
background: $dark_mode_foreground;
path, line, polyline, rect, circle, polygon {
color: inherit;
}
.label {
color: $dark_mode_text_primary;
}
}
}
</style>