ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: Fix styling of navigation input fields

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2024-08-31 11:45:51 +02:00
parent cf0b90369a
commit 482bcb3149
3 changed files with 74 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/e2e/boardFeatures.js
View File

@@ -35,7 +35,7 @@ describe('Board', function() {
.type(board, { force: true })
// Submit
cy.get('.board-create form input[type=submit]')
cy.get('.board-create form button[type=submit]')
.first().click({ force: true })
cy.wait('@createBoardRequest').its('response.statusCode').should('equal', 200)

52
src/components/navigation/AppNavigationAddBoard.vue
View File

@@ -8,19 +8,41 @@
icon="icon-add"
@click.prevent.stop="startCreateBoard" />
<div v-else class="board-create">
<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper" :disabled="loading">
<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</NcColorPicker>
<form @submit.prevent.stop="createBoard">
<input :placeholder="t('deck', 'Board name')" type="text" required>
<input type="submit" value="" class="icon-confirm">
<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
<NcTextField ref="inputField"
:disable="loading"
:value.sync="value"
:placeholder="t('deck', 'Board name')"
type="text"
required />
<NcButton type="tertiary"
:disabled="loading"
:title="t('deck', 'Cancel edit')"
@click.stop.prevent="cancelEdit">
<template #icon>
<CloseIcon :size="20" />
</template>
</NcButton>
<NcButton type="tertiary"
native-type="submit"
:disabled="loading"
:title="t('deck', 'Save board')">
<template #icon>
<CheckIcon v-if="!loading" :size="20" />
<NcLoadingIcon v-else :size="20" />
</template>
</NcButton>
</form>
</div>
</template>
<script>
import { NcColorPicker, NcActionButton, NcActions, NcAppNavigationItem } from '@nextcloud/vue'
import { NcButton, NcColorPicker, NcAppNavigationItem, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
import CheckIcon from 'vue-material-design-icons/Check.vue'
import CloseIcon from 'vue-material-design-icons/Close.vue'
/**
*
@@ -35,30 +57,33 @@ function randomColor() {
export default {
name: 'AppNavigationAddBoard',
components: { NcColorPicker, NcAppNavigationItem, NcActionButton, NcActions },
components: { NcButton, NcColorPicker, NcAppNavigationItem, NcLoadingIcon, NcTextField, CheckIcon, CloseIcon },
directives: {},
props: {},
data() {
return {
value: '',
classes: [],
editing: false,
loading: false,
color: randomColor(),
}
},
computed: {},
watch: {},
mounted() {},
mounted() {
this.$refs.inputField.focus()
},
methods: {
startCreateBoard(e) {
this.editing = true
},
async createBoard(e) {
const title = e.currentTarget.childNodes[0].value
this.loading = true
const title = this.value.trim()
await this.$store.dispatch('createBoard', {
title,
color: this.color.substring(1),
})
this.loading = false
this.editing = false
this.color = randomColor()
},
@@ -89,10 +114,9 @@ export default {
width: var(--default-clickable-area);
height: var(--default-clickable-area);
.color0 {
width: 30px !important;
margin: 5px;
margin-left: 7px;
height: 30px;
width: 24px !important;
margin: var(--default-grid-baseline);
height: 24px;
border-radius: 50%;
background-size: 14px;
}

48
src/components/navigation/AppNavigationBoard.vue
View File

@@ -114,23 +114,43 @@
<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</NcColorPicker>
<form @submit.prevent.stop="applyEdit">
<input v-model="editTitle"
v-focus
dir="auto"
<NcTextField ref="inputField"
:disable="loading"
:value.sync="editTitle"
:placeholder="t('deck', 'Board name')"
type="text"
required>
<input type="submit" value="" class="icon-confirm">
<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
required />
<NcButton type="tertiary"
:disabled="loading"
native-type="submit"
:title="t('deck', 'Cancel edit')"
@click.stop.prevent="cancelEdit">
<template #icon>
<CloseIcon :size="20" />
</template>
</NcButton>
<NcButton type="tertiary"
native-type="submit"
:disabled="loading"
:title="t('deck', 'Save board')">
<template #icon>
<CheckIcon v-if="!loading" :size="20" />
<NcLoadingIcon v-else :size="20" />
</template>
</NcButton>
</form>
</div>
</template>
<script>
import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton } from '@nextcloud/vue'
import ClickOutside from 'vue-click-outside'
import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
import CloneIcon from 'vue-material-design-icons/ContentDuplicate.vue'
import AccountIcon from 'vue-material-design-icons/Account.vue'
import CloseIcon from 'vue-material-design-icons/Close.vue'
import CheckIcon from 'vue-material-design-icons/Check.vue'
import { loadState } from '@nextcloud/initial-state'
const canCreateState = loadState('deck', 'canCreate')
@@ -141,11 +161,14 @@ export default {
NcAppNavigationIconBullet,
NcAppNavigationItem,
NcColorPicker,
NcActions,
NcButton,
NcTextField,
NcActionButton,
AccountIcon,
ArchiveIcon,
CloneIcon,
CloseIcon,
CheckIcon,
},
directives: {
ClickOutside,
@@ -319,7 +342,7 @@ export default {
<style lang="scss" scoped>
.board-edit {
margin-left: var(--default-clickable-area);
margin-left: calc(var(--default-clickable-area) / 2);
order: 1;
display: flex;
height: var(--default-clickable-area);
@@ -338,10 +361,9 @@ export default {
width: var(--default-clickable-area);
height: var(--default-clickable-area);
.color0 {
width: 30px !important;
margin: 5px;
margin-left: 7px;
height: 30px;
width: 24px !important;
margin: var(--default-grid-baseline);
height: 24px;
border-radius: 50%;
background-size: 14px;
}