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

added new color picker

Browse Source 
Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
This commit is contained in:
Jakob Röhrl
2020-01-29 10:59:12 +01:00
committed by Julius Härtl
parent 1ef22524ec
commit 167448dde1
4 changed files with 41 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,6 +29,9 @@
<!-- edit entry -->
<div v-if="editing" class="app-navigation-entry-edit">
<ColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</ColorPicker>
<form @submit.prevent.stop="createBoard">
<input :placeholder="t('deck', 'New board title')" type="text" required>
<input type="submit" value="" class="icon-confirm">
@@ -37,13 +40,14 @@
class="icon-close"
@click.stop.prevent="cancelEdit">
</form>
<ColorPicker v-model="color" />
<!-- <ColorPicker v-model="color" /> -->
</div>
</li>
</template>
<script>
import ColorPicker from '../ColorPicker'
import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
export default {
name: 'AppNavigationAddBoard',
components: { ColorPicker },
@@ -79,9 +83,22 @@ export default {
},
}
</script>
<style scoped>
<style lang="scss" scoped>
#app-navigation .app-navigation-entry-edit div {
width: auto;
display: block;
}
.app-navigation-entry-bullet-wrapper {
position: absolute;
left: 33px;
width: 44px !important;
margin: 6px;
height: 44px;
.color0 {
width: 30px !important;
height: 30px;
border-radius: 50%;
background-size: 14px;
}
}
</style>

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

@@ -62,7 +62,7 @@
<!-- edit entry -->
<div v-if="editing" class="app-navigation-entry-edit">
<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet"></div>
<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</ColorPicker>
<form @submit.prevent.stop="applyEdit">
<input v-model="editTitle" type="text" required>
@@ -79,7 +79,6 @@
<script>
import { PopoverMenu } from '@nextcloud/vue/dist/Components/PopoverMenu'
import ClickOutside from 'vue-click-outside'
// import ColorPicker from '../ColorPicker'
import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
export default {