2019-08-15 13:38:39 +00:00
|
|
|
<template>
|
2019-09-24 15:18:29 +00:00
|
|
|
<div class="create-folder">
|
|
|
|
<span class="create-folder__title">
|
|
|
|
<figure class="icon-folder create-folder__icon" />
|
|
|
|
<input
|
|
|
|
ref="input"
|
|
|
|
v-model="title"
|
|
|
|
type="text"
|
|
|
|
:disabled="loading"
|
|
|
|
:placeholder="t('bookmarks', 'Enter folder title')"
|
|
|
|
@keyup.enter="submit">
|
|
|
|
</span>
|
|
|
|
<Actions>
|
|
|
|
<ActionButton
|
|
|
|
:icon="loading ? 'icon-loading' : 'icon-confirm'"
|
|
|
|
@click="submit">
|
|
|
|
{{ t('bookmarks', 'Create') }}
|
|
|
|
</ActionButton>
|
|
|
|
</Actions>
|
|
|
|
</div>
|
2019-08-15 13:38:39 +00:00
|
|
|
</template>
|
|
|
|
<script>
|
2020-03-05 11:35:05 +00:00
|
|
|
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
|
|
|
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
2019-09-24 15:18:29 +00:00
|
|
|
import { actions } from '../store/'
|
2019-08-15 13:38:39 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'CreateFolder',
|
2019-08-26 22:31:21 +00:00
|
|
|
components: { Actions, ActionButton },
|
2019-08-15 13:38:39 +00:00
|
|
|
data() {
|
|
|
|
return {
|
2019-12-10 21:33:54 +00:00
|
|
|
title: '',
|
2019-09-24 15:18:29 +00:00
|
|
|
}
|
2019-08-15 13:38:39 +00:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
loading() {
|
2019-09-24 15:18:29 +00:00
|
|
|
return this.$store.state.loading.createFolder
|
2019-12-10 21:33:54 +00:00
|
|
|
},
|
2019-08-15 13:38:39 +00:00
|
|
|
},
|
2019-08-26 22:31:21 +00:00
|
|
|
mounted() {
|
2019-09-24 15:18:29 +00:00
|
|
|
this.$refs['input'].focus()
|
2019-08-26 22:31:21 +00:00
|
|
|
},
|
2019-08-15 13:38:39 +00:00
|
|
|
methods: {
|
|
|
|
submit() {
|
2019-09-24 15:18:29 +00:00
|
|
|
const parentFolder = this.$route.params.folder
|
2019-08-15 13:38:39 +00:00
|
|
|
this.$store.dispatch(actions.CREATE_FOLDER, {
|
|
|
|
parentFolder,
|
2019-12-10 21:33:54 +00:00
|
|
|
title: this.title,
|
2019-09-24 15:18:29 +00:00
|
|
|
})
|
2019-12-10 21:33:54 +00:00
|
|
|
},
|
|
|
|
},
|
2019-09-24 15:18:29 +00:00
|
|
|
}
|
2019-08-15 13:38:39 +00:00
|
|
|
</script>
|
|
|
|
<style>
|
2019-08-26 12:57:02 +00:00
|
|
|
.create-folder {
|
2019-08-15 13:38:39 +00:00
|
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
padding: 5px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
2019-08-26 22:41:52 +00:00
|
|
|
|
2019-08-26 12:57:02 +00:00
|
|
|
.create-folder__icon {
|
2019-08-15 13:38:39 +00:00
|
|
|
display: inline-block;
|
|
|
|
flex-shrink: 0;
|
|
|
|
height: 20px;
|
|
|
|
width: 20px;
|
|
|
|
background-size: cover;
|
|
|
|
margin: 0 10px;
|
|
|
|
position: relative;
|
|
|
|
top: 8px;
|
|
|
|
}
|
2019-08-26 22:41:52 +00:00
|
|
|
|
2019-08-26 12:57:02 +00:00
|
|
|
.create-folder__title {
|
2019-08-15 13:38:39 +00:00
|
|
|
display: flex;
|
|
|
|
flex-grow: 1;
|
|
|
|
}
|
2019-08-26 22:41:52 +00:00
|
|
|
|
2019-08-26 12:57:02 +00:00
|
|
|
.create-folder__title > input {
|
2019-08-15 13:38:39 +00:00
|
|
|
width: 100%;
|
|
|
|
}
|
2019-08-26 22:41:52 +00:00
|
|
|
|
2019-08-26 12:57:02 +00:00
|
|
|
.create-folder button {
|
2019-08-15 13:38:39 +00:00
|
|
|
height: 20px;
|
|
|
|
}
|
2019-08-26 22:41:52 +00:00
|
|
|
|
2019-08-26 12:57:02 +00:00
|
|
|
.create-folder input {
|
2019-08-15 13:38:39 +00:00
|
|
|
border-top: none;
|
|
|
|
border-left: none;
|
|
|
|
border-right: none;
|
|
|
|
}
|
|
|
|
</style>
|