vuefilemanager v1.5-alpha.1

This commit is contained in:
carodej
2020-04-29 11:32:08 +02:00
parent 2614efe601
commit 0f3cbaec3d
50 changed files with 426 additions and 355 deletions
@@ -22,7 +22,7 @@
.label {
@include font-size(12);
color: $theme_light;
color: $theme;
font-weight: 600;
text-decoration: underline;
}
@@ -33,7 +33,7 @@
margin-right: 2px;
path {
fill: $theme_light;
fill: $theme;
}
}
}
@@ -75,4 +75,16 @@
}
}
}
@media (prefers-color-scheme: dark) {
.copy-input {
input {
color: $dark_mode_text_primary;
&:disabled {
}
}
}
}
</style>
@@ -14,7 +14,7 @@
<!--If is empty-->
<div class="not-selected" v-if="! selected">
<span class="option-value placehoder">Selected your permision</span>
<span class="option-value placehoder">{{ placeholder }}</span>
</div>
<FontAwesomeIcon icon="chevron-down" class="chevron"/>
@@ -37,7 +37,7 @@
<script>
export default {
name:'SelectInput',
props: ['options', 'isError', 'default'],
props: ['options', 'isError', 'default', 'placeholder'],
data() {
return {
selected: undefined,
@@ -28,7 +28,6 @@
},
methods: {
changeState() {
this.isSwitched = ! this.isSwitched
this.$emit('input', this.isSwitched)
}
@@ -90,4 +89,10 @@
}
}
}
@media (prefers-color-scheme: dark) {
.switch {
background: $dark_mode_foreground;
}
}
</style>
@@ -31,7 +31,8 @@
// Open called popup
events.$on('popup:open', ({name}) => {
if (this.name === name) this.isVisibleWrapper = true
if (this.name === name)
this.isVisibleWrapper = true
})
// Close popup
@@ -1,7 +1,7 @@
<template>
<PopupWrapper name="share-create">
<!--Title-->
<PopupHeader :title="'Share Your ' + itemTypeTitle" />
<PopupHeader :title="$t('popup_share_create.title', {item: itemTypeTitle})" />
<!--Content-->
<PopupContent>
@@ -14,22 +14,22 @@
<!--Permision Select-->
<ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
<label class="input-label">Permission:</label>
<SelectInput v-model="shareOptions.permission" :options="permissionOptions" :isError="errors[0]"/>
<label class="input-label">{{ $t('shared_form.label_permission') }}:</label>
<SelectInput v-model="shareOptions.permission" :options="permissionOptions" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<!--Password Switch-->
<div class="input-wrapper">
<div class="inline-wrapper">
<label class="input-label">Password Protected:</label>
<label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
<SwitchInput v-model="shareOptions.isPassword" class="switch" :state="0"/>
</div>
</div>
<!--Set password-->
<ValidationProvider v-if="shareOptions.isPassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" placeholder="Type your password">
<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</ValidationObserver>
@@ -37,7 +37,7 @@
<!--Copy generated link-->
<div v-if="isGeneratedShared" class="form-wrapper">
<div class="input-wrapper">
<label class="input-label">Share url:</label>
<label class="input-label">{{ $t('shared_form.label_shared_url') }}:</label>
<CopyInput size="small" :value="shareLink" />
</div>
</div>
@@ -65,10 +65,10 @@
</template>
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
import PopupActions from '@/components/Others/Popup/PopupActions'
import PopupContent from '@/components/Others/Popup/PopupContent'
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupHeader from '@/components/Others/Popup/PopupHeader'
import SwitchInput from '@/components/Others/Forms/SwitchInput'
import SelectInput from '@/components/Others/Forms/SelectInput'
@@ -99,13 +99,13 @@
computed: {
...mapGetters(['app', 'permissionOptions']),
itemTypeTitle() {
return this.pickedItem && this.pickedItem.type === 'folder' ? 'Folder' : 'File'
return this.pickedItem && this.pickedItem.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
},
isFolder() {
return this.pickedItem && this.pickedItem.type === 'folder'
},
submitButtonText() {
return this.isGeneratedShared ? 'Awesome, Im done!' : 'Generate Link'
return this.isGeneratedShared ? this.$t('shared_form.button_done') : this.$t('shared_form.button_generate')
}
},
data() {
+11 -12
View File
@@ -1,7 +1,7 @@
<template>
<PopupWrapper name="share-edit">
<!--Title-->
<PopupHeader title="Update sharing options" />
<PopupHeader :title="$t('popup_share_edit.title')" />
<!--Content-->
<PopupContent v-if="pickedItem && pickedItem.shared">
@@ -14,29 +14,29 @@
<!--Share link-->
<div class="input-wrapper">
<label class="input-label">Share url:</label>
<label class="input-label">{{ $t('shared_form.label_shared_url') }}:</label>
<CopyInput size="small" :value="pickedItem.shared.link" />
</div>
<!--Permision Select-->
<ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
<label class="input-label">Permission:</label>
<SelectInput v-model="shareOptions.permission" :options="permissionOptions" :default="shareOptions.permission" :isError="errors[0]"/>
<label class="input-label">{{ $t('shared_form.label_permission') }}:</label>
<SelectInput v-model="shareOptions.permission" :options="permissionOptions" :default="shareOptions.permission" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<!--Password Switch-->
<div class="input-wrapper">
<div class="inline-wrapper">
<label class="input-label">Password Protected:</label>
<label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
<SwitchInput v-model="shareOptions.isProtected" :state="shareOptions.isProtected" class="switch"/>
</div>
<ActionButton v-if="(pickedItem.shared.protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" icon="pencil-alt">Change Password</ActionButton>
<ActionButton v-if="(pickedItem.shared.protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" icon="pencil-alt">{{ $t('popup_share_edit.change_pass') }}</ActionButton>
</div>
<!--Set password-->
<ValidationProvider v-if="shareOptions.isProtected && ! canChangePassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" placeholder="Type your password">
<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -60,17 +60,17 @@
button-style="theme"
:loading="isLoading"
:disabled="isLoading"
>Ok
>{{ $t('popup_share_edit.save') }}
</ButtonBase>
</PopupActions>
</PopupWrapper>
</template>
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
import PopupActions from '@/components/Others/Popup/PopupActions'
import PopupContent from '@/components/Others/Popup/PopupContent'
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupHeader from '@/components/Others/Popup/PopupHeader'
import SwitchInput from '@/components/Others/Forms/SwitchInput'
import SelectInput from '@/components/Others/Forms/SelectInput'
@@ -106,7 +106,7 @@
return this.pickedItem && this.pickedItem.type === 'folder'
},
destroyButtonText() {
return this.isConfirmedDestroy ? 'Confirm' : 'Stop Sharing'
return this.isConfirmedDestroy ? this.$t('popup_share_edit.confirm') : this.$t('popup_share_edit.stop')
},
destroyButtonStyle() {
return this.isConfirmedDestroy ? 'danger-solid' : 'secondary'
@@ -144,7 +144,6 @@
axios
.delete('/api/share/' + this.pickedItem.shared.token)
.then(() => {
// Remove item from file browser
if ( this.isSharedLocation ) {
this.$store.commit('REMOVE_ITEM', this.pickedItem.unique_id)
@@ -154,7 +153,7 @@
this.$store.commit('FLUSH_SHARED', this.pickedItem.unique_id)
// End deleting spinner button
this.isDeleting = false
setTimeout(() => this.isDeleting = false, 150)
this.$closePopup()
})
@@ -159,7 +159,7 @@
.small {
.file-item {
padding: 0 15px;
margin-bottom: 15px;
margin-bottom: 25px;
}
}