-
+
@@ -111,6 +104,7 @@ import { translate as t } from '@nextcloud/l10n'
import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField'
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
import CalendarToday from 'vue-material-design-icons/CalendarToday'
@@ -133,6 +127,7 @@ export default {
NcAppNavigation,
NcAppNavigationItem,
NcCounterBubble,
+ NcTextField,
AppNavigationSettings,
draggable,
CalendarToday,
@@ -388,33 +383,29 @@ export default {
this.newCalendarName = ''
this.creating = true
this.$nextTick(
- () => document.getElementById('newListInput').focus()
+ () => this.$refs.newListInput.$refs.inputField.$refs.input.focus()
)
e.stopPropagation()
},
- cancelCreate() {
- this.creating = false
- },
create() {
- if (!this.isNameAllowed(this.newCalendarName, 'new').allowed) {
+ if (!this.isNameAllowed(this.newCalendarName).allowed) {
return
}
this.appendCalendar({ displayName: this.newCalendarName, color: this.selectedColor })
this.creating = false
},
- checkName(event, calendar, callback) {
- const calendarId = calendar ? calendar.id : ''
- const check = this.isNameAllowed(this.newCalendarName, calendarId)
+ checkName(event) {
+ const check = this.isNameAllowed(this.newCalendarName)
this.tooltipMessage = check.msg
if (!check.allowed) {
- this.tooltipTarget = 'list_' + calendarId
+ this.tooltipTarget = 'list_new'
this.nameError = true
} else {
this.tooltipTarget = ''
this.nameError = false
}
if (event.keyCode === 13) {
- callback(calendar)
+ this.create()
}
if (event.keyCode === 27) {
event.preventDefault()
@@ -424,12 +415,12 @@ export default {
this.nameError = false
}
},
- isNameAllowed(name, id) {
+ isNameAllowed(name) {
const check = {
allowed: false,
msg: '',
}
- if (this.isCalendarNameUsed(name, id)) {
+ if (this.isCalendarNameUsed(name)) {
check.msg = t('tasks', 'The name "{calendar}" is already used.', { calendar: name }, undefined, { sanitize: false, escape: false })
} else if (!name) {
check.msg = t('tasks', 'An empty name is not allowed.')
@@ -484,38 +475,6 @@ $color-error: #e9322d;
padding-left: 5px !important;
display: none;
position: relative;
-
- &.error input.edit {
- color: var(--color-error);
- border-color: var(--color-error) !important;
- box-shadow: 0 0 6px transparentize( $color-error, .7 );
- }
-
- form {
- display: flex;
-
- input {
- margin-right: 0;
-
- &[type='text'] {
- flex-grow: 1;
- }
-
- &.action {
- background-color: var(--color-background-dark);
- width: 36px;
- border-left: 0 none;
- background-position: center;
- cursor: pointer;
-
- &:hover {
- border-left: 1px solid;
- margin-left: -1px;
- width: 37px;
- }
- }
- }
- }
}
}