mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-24 21:54:42 +00:00
- Toggle for enable/disable landing page
- New app screenshots for landing page - frontend build - some ui fixes
This commit is contained in:
Peter Papp
@@ -23,14 +23,13 @@
|
||||
<!-- Single options -->
|
||||
<OptionGroup v-if="multiSelectContextMenu">
|
||||
<Option @click.native="restoreItem" v-if="item" :title="$t('context_menu.restore')" icon="restore"/>
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
|
||||
<Option @click.native="deleteItem" v-if="item" :title="$t('context_menu.delete')" icon="trash"/>
|
||||
<Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash"/>
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup v-if="item && multiSelectContextMenu">
|
||||
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail"/>
|
||||
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
|
||||
<Option @click.native="downloadFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder"/>
|
||||
</OptionGroup>
|
||||
|
||||
<!-- Multi options -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<PopupWrapper name="rename-item">
|
||||
<!--Title-->
|
||||
<PopupHeader :title="$t('popup_rename.title', {item: itemTypeTitle})" icon="edit" />
|
||||
<PopupHeader :title="$t('popup_rename.title', {item: itemTypeTitle})" icon="edit"/>
|
||||
|
||||
<!--Content-->
|
||||
<PopupContent>
|
||||
@@ -30,184 +30,174 @@
|
||||
|
||||
</ValidationObserver>
|
||||
|
||||
|
||||
|
||||
|
||||
</PopupContent>
|
||||
|
||||
<!--Actions-->
|
||||
<PopupActions>
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
@click.native="$closePopup()"
|
||||
button-style="secondary"
|
||||
>{{ $t('popup_move_item.cancel') }}
|
||||
<ButtonBase class="popup-button" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }}
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
@click.native="changeName"
|
||||
button-style="theme"
|
||||
>{{ $t('popup_share_edit.save') }}
|
||||
<ButtonBase class="popup-button" @click.native="changeName" button-style="theme">{{ $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 PopupHeader from '@/components/Others/Popup/PopupHeader'
|
||||
import SetFolderIcon from '@/components/Others/SetFolderIcon'
|
||||
import ThumbnailItem from '@/components/Others/ThumbnailItem'
|
||||
import ActionButton from '@/components/Others/ActionButton'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import {XIcon} from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {events} from '@/bus'
|
||||
import axios from 'axios'
|
||||
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 PopupHeader from '@/components/Others/Popup/PopupHeader'
|
||||
import SetFolderIcon from '@/components/Others/SetFolderIcon'
|
||||
import ThumbnailItem from '@/components/Others/ThumbnailItem'
|
||||
import ActionButton from '@/components/Others/ActionButton'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import { XIcon } from 'vue-feather-icons'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import { events } from '@/bus'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'RenameItem',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SetFolderIcon,
|
||||
ThumbnailItem,
|
||||
ActionButton,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
required,
|
||||
XIcon,
|
||||
export default {
|
||||
name: 'RenameItem',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SetFolderIcon,
|
||||
ThumbnailItem,
|
||||
ActionButton,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
required,
|
||||
XIcon
|
||||
},
|
||||
computed: {
|
||||
itemTypeTitle() {
|
||||
return this.pickedItem && this.pickedItem.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
|
||||
},
|
||||
computed: {
|
||||
itemTypeTitle() {
|
||||
return this.pickedItem && this.pickedItem.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
|
||||
},
|
||||
moreOptionsTitle() {
|
||||
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickedItem: undefined,
|
||||
isMoreOptions:false,
|
||||
setFolderIcon: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moreOptions(){
|
||||
this.isMoreOptions = ! this.isMoreOptions
|
||||
|
||||
this.setFolderIcon = undefined
|
||||
},
|
||||
changeName() {
|
||||
if (this.pickedItem.name && this.pickedItem.name !== '') {
|
||||
|
||||
let item = {
|
||||
unique_id: this.pickedItem.unique_id,
|
||||
type: this.pickedItem.type,
|
||||
name: this.pickedItem.name,
|
||||
folder_icon: this.setFolderIcon ? this.setFolderIcon : null
|
||||
}
|
||||
|
||||
// Rename item request
|
||||
this.$store.dispatch('renameItem', item)
|
||||
|
||||
// Rename item in view
|
||||
events.$emit('change:name', item)
|
||||
|
||||
this.$closePopup()
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// Show popup
|
||||
events.$on('popup:open', args => {
|
||||
|
||||
if (args.name !== 'rename-item') return
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.focus()
|
||||
})
|
||||
|
||||
this.isMoreOptions = false
|
||||
|
||||
this.setFolderIcon = undefined
|
||||
|
||||
// Store picked item
|
||||
this.pickedItem = args.item
|
||||
})
|
||||
|
||||
events.$on('setFolderIcon', (icon) => {
|
||||
this.setFolderIcon = ! icon ? undefined : icon.value
|
||||
})
|
||||
moreOptionsTitle() {
|
||||
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickedItem: undefined,
|
||||
isMoreOptions: false,
|
||||
setFolderIcon: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moreOptions() {
|
||||
this.isMoreOptions = !this.isMoreOptions
|
||||
|
||||
this.setFolderIcon = undefined
|
||||
},
|
||||
changeName() {
|
||||
if (this.pickedItem.name && this.pickedItem.name !== '') {
|
||||
|
||||
let item = {
|
||||
unique_id: this.pickedItem.unique_id,
|
||||
type: this.pickedItem.type,
|
||||
name: this.pickedItem.name,
|
||||
folder_icon: this.setFolderIcon ? this.setFolderIcon : null
|
||||
}
|
||||
|
||||
// Rename item request
|
||||
this.$store.dispatch('renameItem', item)
|
||||
|
||||
// Rename item in view
|
||||
events.$emit('change:name', item)
|
||||
|
||||
this.$closePopup()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// Show popup
|
||||
events.$on('popup:open', args => {
|
||||
|
||||
if (args.name !== 'rename-item') return
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.focus()
|
||||
})
|
||||
|
||||
this.isMoreOptions = false
|
||||
|
||||
this.setFolderIcon = undefined
|
||||
|
||||
// Store picked item
|
||||
this.pickedItem = args.item
|
||||
})
|
||||
|
||||
events.$on('setFolderIcon', (icon) => {
|
||||
this.setFolderIcon = !icon ? undefined : icon.value
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.input {
|
||||
position: relative;
|
||||
.input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.close-icon-wrapper {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 15px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.close-icon-wrapper {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 21px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: rgba($text-muted, 0.3);
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.close-icon-wrapper {
|
||||
&:hover {
|
||||
background: rgba($theme, 0.1) !important;
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: rgba($text-muted, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.close-icon-wrapper {
|
||||
&:hover {
|
||||
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: rgba($dark_mode_text_primary, 0.3) !important;
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: rgba($dark_mode_text_primary, 0.3) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<PageTab :is-loading="isLoading" class="form-fixed-width">
|
||||
|
||||
<PageTabGroup>
|
||||
<PageTabGroup v-if="app">
|
||||
<div class="form block-form">
|
||||
|
||||
<FormLabel>Home Page</FormLabel>
|
||||
@@ -17,12 +17,7 @@
|
||||
When this is turned on, your visitors can visit your default homepage.
|
||||
</small>
|
||||
</div>
|
||||
<SwitchInput
|
||||
@input="$updateText('/settings', 'allow_homepage', allow_homepage)"
|
||||
v-model="allow_homepage"
|
||||
class="switch"
|
||||
:state="allow_homepage"
|
||||
/>
|
||||
<SwitchInput @input="$updateText('/settings', 'allow_homepage', app.allow_homepage)" v-model="app.allow_homepage" class="switch" :state="app.allow_homepage"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,9 +33,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Title:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/settings', 'header_title', header_title)" v-model="header_title"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<input @input="$updateText('/settings', 'header_title', app.header_title)" v-model="app.header_title" type="text" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -48,8 +41,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Description:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
|
||||
<textarea @input="$updateText('/settings', 'header_description', header_description)" rows="2" v-model="header_description"
|
||||
:class="{'is-error': errors[0]}"></textarea>
|
||||
<textarea @input="$updateText('/settings', 'header_description', app.header_description)" rows="2" v-model="app.header_description" :class="{'is-error': errors[0]}"></textarea>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -67,18 +59,13 @@
|
||||
Show section:
|
||||
</label>
|
||||
</div>
|
||||
<SwitchInput
|
||||
@input="$updateText('/settings', 'section_features', section_features)"
|
||||
v-model="section_features"
|
||||
class="switch"
|
||||
:state="section_features"
|
||||
/>
|
||||
<SwitchInput @input="$updateText('/settings', 'section_features', app.section_features)" v-model="app.section_features" class="switch" :state="app.section_features"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="section_features">
|
||||
<div v-if="app.section_features">
|
||||
<div class="block-wrapper">
|
||||
<img src="/assets/images/admin/main-features.jpg" alt="Main Features" class="page-image">
|
||||
</div>
|
||||
@@ -86,9 +73,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Title:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/settings', 'features_title', features_title)" v-model="features_title"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<input @input="$updateText('/settings', 'features_title', app.features_title)" v-model="app.features_title" type="text" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -96,8 +81,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Description:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
|
||||
<textarea @input="$updateText('/settings', 'features_description', features_description)" rows="2" v-model="features_description"
|
||||
:class="{'is-error': errors[0]}"></textarea>
|
||||
<textarea @input="$updateText('/settings', 'features_description', app.features_description)" rows="2" v-model="app.features_description" :class="{'is-error': errors[0]}"></textarea>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -116,68 +100,54 @@
|
||||
Show section:
|
||||
</label>
|
||||
</div>
|
||||
<SwitchInput
|
||||
@input="$updateText('/settings', 'section_feature_boxes', section_feature_boxes)"
|
||||
v-model="section_feature_boxes"
|
||||
class="switch"
|
||||
:state="section_feature_boxes"
|
||||
/>
|
||||
<SwitchInput @input="$updateText('/settings', 'section_feature_boxes', app.section_feature_boxes)" v-model="app.section_feature_boxes" class="switch" :state="app.section_feature_boxes"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="section_feature_boxes">
|
||||
<div v-if="app.section_feature_boxes">
|
||||
<div class="block-wrapper">
|
||||
<img src="/assets/images/admin/feature-boxes.jpg" alt="Main Features" class="page-image">
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>First Box Title:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 1" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/settings', 'feature_title_1', feature_title_1)" v-model="feature_title_1"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<input @input="$updateText('/settings', 'feature_title_1', app.feature_title_1)" v-model="app.feature_title_1" type="text" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>First Box Description:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 1" rules="required" v-slot="{ errors }">
|
||||
<textarea @input="$updateText('/settings', 'feature_description_1', feature_description_1)" rows="2" v-model="feature_description_1"
|
||||
:class="{'is-error': errors[0]}"></textarea>
|
||||
<textarea @input="$updateText('/settings', 'feature_description_1', app.feature_description_1)" rows="2" v-model="app.feature_description_1" :class="{'is-error': errors[0]}"></textarea>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Second Box Title:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 2" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/settings', 'feature_title_2', feature_title_2)" v-model="feature_title_2"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<input @input="$updateText('/settings', 'feature_title_2', app.feature_title_2)" v-model="app.feature_title_2" type="text" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Second Box Description:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 2" rules="required" v-slot="{ errors }">
|
||||
<textarea @input="$updateText('/settings', 'feature_description_2', feature_description_2)" rows="2" v-model="feature_description_2"
|
||||
:class="{'is-error': errors[0]}"></textarea>
|
||||
<textarea @input="$updateText('/settings', 'feature_description_2', app.feature_description_2)" rows="2" v-model="app.feature_description_2" :class="{'is-error': errors[0]}"></textarea>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Third Box Title:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 3" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/settings', 'feature_title_3', feature_title_3)" v-model="feature_title_3"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<input @input="$updateText('/settings', 'feature_title_3', app.feature_title_3)" v-model="app.feature_title_3" type="text" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Third Box Description:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 3" rules="required" v-slot="{ errors }">
|
||||
<textarea @input="$updateText('/settings', 'feature_description_3', feature_description_3)" rows="2" v-model="feature_description_3"
|
||||
:class="{'is-error': errors[0]}"></textarea>
|
||||
<textarea @input="$updateText('/settings', 'feature_description_3', app.feature_description_3)" rows="2" v-model="app.feature_description_3" :class="{'is-error': errors[0]}"></textarea>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -196,26 +166,19 @@
|
||||
Show section:
|
||||
</label>
|
||||
</div>
|
||||
<SwitchInput
|
||||
@input="$updateText('/settings', 'section_pricing_content', section_pricing_content)"
|
||||
v-model="section_pricing_content"
|
||||
class="switch"
|
||||
:state="section_pricing_content"
|
||||
/>
|
||||
<SwitchInput @input="$updateText('/settings', 'section_pricing_content', app.section_pricing_content)" v-model="app.section_pricing_content" class="switch" :state="app.section_pricing_content"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="section_pricing_content">
|
||||
<div v-if="app.section_pricing_content">
|
||||
<div class="block-wrapper">
|
||||
<img src="/assets/images/admin/pricing-content.jpg" alt="Main Features" class="page-image">
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Title:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/settings', 'pricing_title', pricing_title)" v-model="pricing_title"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<input @input="$updateText('/settings', 'pricing_title', app.pricing_title)" v-model="app.pricing_title" type="text" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -223,8 +186,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Description:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
|
||||
<textarea @input="$updateText('/settings', 'pricing_description', pricing_description)" rows="2" v-model="pricing_description"
|
||||
:class="{'is-error': errors[0]}"></textarea>
|
||||
<textarea @input="$updateText('/settings', 'pricing_description', app.pricing_description)" rows="2" v-model="app.pricing_description" :class="{'is-error': errors[0]}"></textarea>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -243,27 +205,20 @@
|
||||
Show section:
|
||||
</label>
|
||||
</div>
|
||||
<SwitchInput
|
||||
@input="$updateText('/settings', 'section_get_started', section_get_started)"
|
||||
v-model="section_get_started"
|
||||
class="switch"
|
||||
:state="section_get_started"
|
||||
/>
|
||||
<SwitchInput @input="$updateText('/settings', 'section_get_started', app.section_get_started)" v-model="app.section_get_started" class="switch" :state="app.section_get_started"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="section_get_started">
|
||||
<div v-if="app.section_get_started">
|
||||
<div class="block-wrapper">
|
||||
<img src="/assets/images/admin/get-started-content.jpg" alt="Main Features" class="page-image">
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Title:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/settings', 'get_started_title', get_started_title)" v-model="get_started_title"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<input @input="$updateText('/settings', 'get_started_title', app.get_started_title)" v-model="app.get_started_title" type="text" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -271,8 +226,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Description:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
|
||||
<textarea @input="$updateText('/settings', 'get_started_description', get_started_description)" rows="2" v-model="get_started_description"
|
||||
:class="{'is-error': errors[0]}"></textarea>
|
||||
<textarea @input="$updateText('/settings', 'get_started_description', app.get_started_description)" rows="2" v-model="app.get_started_description" :class="{'is-error': errors[0]}"></textarea>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -286,9 +240,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Footer content:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/settings', 'footer_content', footer_content)" v-model="footer_content"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<input @input="$updateText('/settings', 'footer_content', app.footer_content)" v-model="app.footer_content" type="text" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -299,131 +251,100 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import StorageItemDetail from '@/components/Others/StorageItemDetail'
|
||||
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import SwitchInput from '@/components/Others/Forms/SwitchInput'
|
||||
import ImageInput from '@/components/Others/Forms/ImageInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import SetupBox from '@/components/Others/Forms/SetupBox'
|
||||
import PageTab from '@/components/Others/Layout/PageTab'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import axios from 'axios'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import StorageItemDetail from '@/components/Others/StorageItemDetail'
|
||||
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import SwitchInput from '@/components/Others/Forms/SwitchInput'
|
||||
import ImageInput from '@/components/Others/Forms/ImageInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import SetupBox from '@/components/Others/Forms/SetupBox'
|
||||
import PageTab from '@/components/Others/Layout/PageTab'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import axios from 'axios'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AppIndex',
|
||||
components: {
|
||||
ValidationObserver,
|
||||
ValidationProvider,
|
||||
StorageItemDetail,
|
||||
PageTabGroup,
|
||||
SwitchInput,
|
||||
SelectInput,
|
||||
ImageInput,
|
||||
ButtonBase,
|
||||
FormLabel,
|
||||
SetupBox,
|
||||
required,
|
||||
PageTab,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
allow_homepage: 1,
|
||||
section_features: 1,
|
||||
section_feature_boxes: 1,
|
||||
section_pricing_content: 1,
|
||||
section_get_started: 1,
|
||||
|
||||
header_title: '',
|
||||
header_description: '',
|
||||
|
||||
features_title: '',
|
||||
features_description: '',
|
||||
|
||||
feature_title_1: '',
|
||||
feature_description_1: '',
|
||||
|
||||
feature_title_2: '',
|
||||
feature_description_2: '',
|
||||
|
||||
feature_title_3: '',
|
||||
feature_description_3: '',
|
||||
|
||||
pricing_title: '',
|
||||
pricing_description: '',
|
||||
|
||||
get_started_title: '',
|
||||
get_started_description: '',
|
||||
|
||||
footer_content: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get('/api/settings', {
|
||||
params: {
|
||||
column: 'allow_homepage|footer_content|get_started_description|get_started_title|pricing_description|pricing_title|feature_description_3|feature_title_3|feature_description_2|feature_title_2|feature_description_1|feature_title_1|features_description|features_title|header_description|header_title|section_get_started|section_pricing_content|section_feature_boxes|section_features'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.allow_homepage = parseInt(response.data.allow_homepage)
|
||||
this.section_features = parseInt(response.data.section_features)
|
||||
this.section_feature_boxes = parseInt(response.data.section_feature_boxes)
|
||||
this.section_pricing_content = parseInt(response.data.section_pricing_content)
|
||||
this.section_get_started = parseInt(response.data.section_get_started)
|
||||
|
||||
this.header_title = response.data.header_title
|
||||
this.header_description = response.data.header_description
|
||||
|
||||
this.features_title = response.data.features_title
|
||||
this.features_description = response.data.features_description
|
||||
|
||||
this.feature_title_1 = response.data.feature_title_1
|
||||
this.feature_description_1 = response.data.feature_description_1
|
||||
|
||||
this.feature_title_2 = response.data.feature_title_2
|
||||
this.feature_description_2 = response.data.feature_description_2
|
||||
|
||||
this.feature_title_3 = response.data.feature_title_3
|
||||
this.feature_description_3 = response.data.feature_description_3
|
||||
|
||||
this.pricing_title = response.data.pricing_title
|
||||
this.pricing_description = response.data.pricing_description
|
||||
|
||||
this.get_started_title = response.data.get_started_title
|
||||
this.get_started_description = response.data.get_started_description
|
||||
|
||||
this.footer_content = response.data.footer_content
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
export default {
|
||||
name: 'AppIndex',
|
||||
components: {
|
||||
ValidationObserver,
|
||||
ValidationProvider,
|
||||
StorageItemDetail,
|
||||
PageTabGroup,
|
||||
SwitchInput,
|
||||
SelectInput,
|
||||
ImageInput,
|
||||
ButtonBase,
|
||||
FormLabel,
|
||||
SetupBox,
|
||||
required,
|
||||
PageTab,
|
||||
InfoBox
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
app: undefined
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get('/api/settings', {
|
||||
params: {
|
||||
column: 'allow_homepage|footer_content|get_started_description|get_started_title|pricing_description|pricing_title|feature_description_3|feature_title_3|feature_description_2|feature_title_2|feature_description_1|feature_title_1|features_description|features_title|header_description|header_title|section_get_started|section_pricing_content|section_feature_boxes|section_features'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.app = {
|
||||
allow_homepage: parseInt(response.data.allow_homepage),
|
||||
section_features: parseInt(response.data.section_features),
|
||||
section_feature_boxes: parseInt(response.data.section_feature_boxes),
|
||||
section_pricing_content: parseInt(response.data.section_pricing_content),
|
||||
section_get_started: parseInt(response.data.section_get_started),
|
||||
header_title: response.data.header_title,
|
||||
header_description: response.data.header_description,
|
||||
features_title: response.data.features_title,
|
||||
features_description: response.data.features_description,
|
||||
feature_title_1: response.data.feature_title_1,
|
||||
feature_description_1: response.data.feature_description_1,
|
||||
feature_title_2: response.data.feature_title_2,
|
||||
feature_description_2: response.data.feature_description_2,
|
||||
feature_title_3: response.data.feature_title_3,
|
||||
feature_description_3: response.data.feature_description_3,
|
||||
pricing_title: response.data.pricing_title,
|
||||
pricing_description: response.data.pricing_description,
|
||||
get_started_title: response.data.get_started_title,
|
||||
get_started_description: response.data.get_started_description,
|
||||
footer_content: response.data.footer_content
|
||||
}
|
||||
|
||||
console.log(this.app);
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.page-image {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ececec;
|
||||
}
|
||||
.page-image {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ececec;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
// Get page content
|
||||
axios.get('/api/content', {
|
||||
params: {
|
||||
column: 'footer_content|get_started_description|get_started_title|pricing_description|pricing_title|feature_description_3|feature_title_3|feature_description_2|feature_title_2|feature_description_1|feature_title_1|features_description|features_title|header_description|header_title|section_get_started|section_pricing_content|section_feature_boxes|section_features'
|
||||
column: 'allow_homepage|footer_content|get_started_description|get_started_title|pricing_description|pricing_title|feature_description_3|feature_title_3|feature_description_2|feature_title_2|feature_description_1|feature_title_1|features_description|features_title|header_description|header_title|section_get_started|section_pricing_content|section_feature_boxes|section_features'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
|
||||
Reference in New Issue
Block a user