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

create token UI refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-26 16:59:36 +01:00
parent 737fb7f32f
commit 438e930e06
7 changed files with 95 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/Others/CreatePersonaTokenPopup.vue → resources/js/components/Others/CreatePersonalTokenPopup.vue
View File

@@ -70,7 +70,7 @@ import {events} from '/resources/js/bus'
import axios from 'axios'
export default {
name: "CreatePersonaTokenPopup",
name: "CreatePersonalTokenPopup",
components: {
ValidationProvider,
ValidationObserver,

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

@@ -15,7 +15,7 @@
{{ title }}
</b>
</div>
<div @click="closePopup" class="cursor-pointer">
<div @click="closePopup" class="cursor-pointer p-3 -m-3">
<x-icon size="14" class="hover-text-theme vue-feather" />
</div>
</div>

38
resources/js/components/Subscription/UserUsageEstimates.vue
View File

@@ -12,26 +12,24 @@
{{ user.data.relationships.subscription.data.attributes.updated_at }} {{ $t('till now') }}
</b>
<div>
<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in user.data.meta.usages.featureEstimates" :key="i">
<div class="w-2/4 leading-none">
<b class="text-sm font-bold leading-none">
{{ $t(usage.feature) }}
</b>
<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
{{ $t(`feature_usage_desc_${usage.feature}`) }}
</small>
</div>
<div class="text-left w-1/4">
<span class="text-sm font-bold text-gray-560">
{{ usage.usage }}
</span>
</div>
<div class="text-right w-1/4">
<span class="text-sm font-bold text-theme">
{{ usage.cost }}
</span>
</div>
<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in user.data.meta.usages.featureEstimates" :key="i">
<div class="w-2/4 leading-none">
<b class="text-sm font-bold leading-none">
{{ $t(usage.feature) }}
</b>
<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
{{ $t(`feature_usage_desc_${usage.feature}`) }}
</small>
</div>
<div class="text-left w-1/4">
<span class="text-sm font-bold text-gray-560">
{{ usage.usage }}
</span>
</div>
<div class="text-right w-1/4">
<span class="text-sm font-bold text-theme">
{{ usage.cost }}
</span>
</div>
</div>

6
resources/js/views/Profile.vue
View File

@@ -13,7 +13,7 @@
<TwoFactorQrSetupPopup />
<!--Access Token Popup-->
<CreatePersonaTokenPopup />
<CreatePersonalTokenPopup />
<!--Payments Popup-->
<SelectPlanSubscriptionPopup />
@@ -73,7 +73,7 @@
import FilePreview from '/resources/js/components/FilePreview/FilePreview'
import Spotlight from '/resources/js/components/Spotlight/Spotlight'
import TwoFactorRecoveryCodesPopup from '/resources/js/components/Others/TwoFactorRecoveryCodesPopup'
import CreatePersonaTokenPopup from '/resources/js/components/Others/CreatePersonaTokenPopup'
import CreatePersonalTokenPopup from '/resources/js/components/Others/CreatePersonalTokenPopup'
import TwoFactorQrSetupPopup from '/resources/js/components/Others/TwoFactorQrSetupPopup'
import UserImageInput from '/resources/js/components/Others/UserImageInput'
import SidebarNavigation from "../components/Sidebar/SidebarNavigation"
@@ -97,7 +97,7 @@
FilePreview,
Spotlight,
TwoFactorRecoveryCodesPopup,
CreatePersonaTokenPopup,
CreatePersonalTokenPopup,
TwoFactorQrSetupPopup,
SidebarNavigation,
UserImageInput,

146
resources/js/views/User/Password.vue
View File

@@ -24,19 +24,25 @@
<InfoBox v-if="tokens.length === 0">
<p>{{ $t("personal_token.section_description") }}</p>
</InfoBox>
<InfoBox v-if="tokens.length > 0">
<ul class="tokens-wrapper">
<li class="token-item" v-for="token in tokens" :key="token.id">
<div class="tokens-details">
<b class="name">{{ token.name }}</b>
<time class="last-used">{{ $t('last_used') }}: {{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}</time>
</div>
<div @click="confirmDeleteToken(token)" class="tokens-destroyer">
<x-icon size="16" class="close-icon hover-text-theme" />
</div>
</li>
</ul>
</InfoBox>
<div class="mb-5">
<div v-if="tokens.length > 0" class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="token in tokens" :key="token.id">
<div class="leading-none">
<b class="text-sm font-bold leading-none">
{{ token.name }}
</b>
<time class="text-xs text-gray-500 pt-2 leading-none block">
{{ $t('last_used') }}: {{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}
</time>
</div>
<div class="text-right">
<div @click="confirmDeleteToken(token)" class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
<Trash2Icon size="15" class="opacity-75" />
</div>
</div>
</div>
</div>
<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="sm:w-auto w-full">
{{ $t('personal_token.create_token') }}
</ButtonBase>
@@ -75,36 +81,31 @@
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import UserImageInput from '/resources/js/components/Others/UserImageInput'
import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import PageHeader from '/resources/js/components/Others/PageHeader'
import ThemeLabel from '/resources/js/components/Others/ThemeLabel'
import AppInputSwitch from "../../components/Admin/AppInputSwitch"
import AppInputButton from "../../components/Admin/AppInputButton"
import AppInputText from "../../components/Admin/AppInputText"
import {required} from 'vee-validate/dist/rules'
import {XIcon} from 'vue-feather-icons'
import {XIcon, Trash2Icon} from 'vue-feather-icons'
import {events} from '/resources/js/bus'
import {mapGetters} from 'vuex'
import axios from 'axios'
import AppInputButton from "../../components/Admin/AppInputButton";
export default {
name: 'Password',
components: {
AppInputButton,
ValidationProvider,
ValidationObserver,
UserImageInput,
AppInputButton,
AppInputSwitch,
AppInputText,
SwitchInput,
PageHeader,
ButtonBase,
ThemeLabel,
FormLabel,
Trash2Icon,
required,
InfoBox,
XIcon,
@@ -288,104 +289,3 @@
},
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_forms';
.tokens-wrapper {
margin-top: 0 !important;
.token-item {
display: flex;
justify-content: space-between;
width: 100%;
padding: 10px 0;
border-bottom: 1px solid darken($light_mode_border, 5%);
align-items: center;
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: 0 solid transparent;
padding-bottom: 0;
}
}
.tokens-details {
.name {
@include font-size(16);
}
.last-used {
@include font-size(12);
color: $text-muted;
line-height: 1.35;
display: block;
}
}
.tokens-destroyer {
margin-top: 10px;
.close-icon {
opacity: 0.2;
&:hover {
opacity: 1;
line {
color: inherit;
}
}
}
}
.tokens-destroyer {
cursor: pointer;
}
}
@media only screen and (max-width: 960px) {
.form {
.button-base {
width: 100%;
margin-top: 0;
text-align: center;
}
}
}
@media only screen and (max-width: 690px) {
.form .button-block {
display: block;
.popup-button {
margin-top: 15px;
}
}
}
.dark {
.tokens-wrapper {
margin-top: 0 !important;
.token-item {
border-color: lighten($dark_mode_foreground, 3%);
}
.tokens-details {
.last-used {
color: $dark_mode_text_secondary;
}
}
}
}
</style>