Skip to content

Commit

Permalink
fixup! Add color picker for tags
Browse files Browse the repository at this point in the history 
Signed-off-by: greta <[email protected]>
  • Loading branch information
@GretaD
GretaD committed Sep 26, 2023
1 parent dcf6312 commit 8cdb127
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 66 deletions.
128 changes: 128 additions & 0 deletions src/components/TagItem.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<template>
<!-- <div class="tag-group__label"

Check failure on line 2 in src/components/TagItem.vue

View workflow job for this annotation

GitHub Actions / eslint 

Unexpected tab character
:style="{
color: convertHex(tag.color, 1),
'background-color': convertHex(tag.color, 0.15)
}">
{{ tag.displayName }}
</div>-->
<Actions :force-menu="true">
<NcActionButton v-if="renameTagLabel"
@click="openEditTag">
<template #icon>
<IconRename :size="17" />
</template>
{{ t('mail','Edit name and color') }}
</NcActionButton>
<NcAppNavigationIconBullet v-if="editing"
slot="icon"
:color="tag.color" />
<ActionInput v-if="renameTagInput"
:value="tag.displayName"
@submit="renameTag(tag, $event)" />
<ActionText
v-if="showSaving">
<template #icon>
<IconLoading :size="20" />
</template>
{{ t('mail', 'Saving new tag name …') }}
</ActionText>
<NcColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${tag.color}`" @input="updateColor">
<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</NcColorPicker>
</Actions>
</template>

<script>
import IconRename from 'vue-material-design-icons/Pencil.vue'
import { NcAppNavigationIconBullet, NcColorPicker, NcActions as Actions, NcActionButton, NcActionText as ActionText, NcActionInput as ActionInput, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
import { showInfo } from '@nextcloud/dialogs'
export default {
name: 'TagItem',
components: {
NcAppNavigationIconBullet,
NcColorPicker,
Actions,
NcActionButton,
ActionText,
ActionInput,
IconLoading,
IconRename,
},
props: {
tag: {
type: Object,
required: true,
},
},
data() {
return {
isAdded: false,
editing: false,
tagLabel: true,
tagInput: false,
showSaving: false,
renameTagLabel: true,
renameTagInput: false,
editColor: '',
}
},
computed: {
getColor() {
if (this.editColor !== '') {
return this.editColor
}
return this.tag.color
},
},
methods: {
updateColor(newColor) {
this.editColor = newColor
},
openEditTag() {
this.renameTagLabel = false
this.renameTagInput = true
this.showSaving = false
},
async renameTag(tag, event) {
this.renameTagInput = false
this.showSaving = false
const displayName = event.target.querySelector('input[type=text]').value
try {
await this.$store.dispatch('updateTag', {
tag,
displayName,
color: tag.color,
})
this.renameTagLabel = true
this.renameTagInput = false
this.showSaving = false
} catch (error) {
showInfo(t('mail', 'An error occurred, unable to rename the tag.'))
console.error(error)
this.renameTagLabel = false
this.renameTagInput = false
this.showSaving = true
}
},
convertHex(color, opacity) {
if (color.length === 4) {
const r = parseInt(color.substring(1, 2), 16)
const g = parseInt(color.substring(2, 3), 16)
const b = parseInt(color.substring(3, 4), 16)
return `rgba(${r}, ${g}, ${b}, ${opacity})`
} else {
const r = parseInt(color.substring(1, 3), 16)
const g = parseInt(color.substring(3, 5), 16)
const b = parseInt(color.substring(5, 7), 16)
return `rgba(${r}, ${g}, ${b}, ${opacity})`
}
},
},
}
</script>
<style scoped lang="scss">
</style>
92 changes: 26 additions & 66 deletions src/components/TagModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,39 +26,9 @@
<h2 class="tag-title">
{{ t('mail', 'Add default tags') }}
</h2>
<div v-for="tag in tags" :key="tag.id" class="tag-group">
<button class="tag-group__label"
:style="{
color: convertHex(tag.color, 1),
'background-color': convertHex(tag.color, 0.15)
}">
{{ tag.displayName }}
</button>
<Actions :force-menu="true">
<ActionButton v-if="renameTagLabel"
@click="openEditTag">
<template #icon>
<IconRename :size="17" />
</template>
{{ t('mail','Edit name and color') }}
</ActionButton>
<NcAppNavigationIconBullet v-if="editing"
slot="icon"
:color="tag.color" />
<ActionInput v-if="renameTagInput"
:value="tag.displayName"
@submit="renameTag(tag, $event)" />
<ActionText
v-if="showSaving">
<template #icon>
<IconLoading :size="20" />
</template>
{{ t('mail', 'Saving new tag name …') }}
</ActionText>
<NcColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${tag.color}`" @input="updateColor">
<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</NcColorPicker>
</Actions>
<TagItem v-for="tag in tags"
:key="tag.id"
:tag="tag">
<button v-if="!isSet(tag.imapLabel)"
class="tag-actions"
@click="addTag(tag.imapLabel)">
Expand All @@ -69,37 +39,37 @@
@click="removeTag(tag.imapLabel)">
{{ t('mail','Unset tag') }}
</button>
</div>
<h2 class="tag-title">
</TagItem>
</div>
<h2 class="tag-title">
{{ t('mail', 'Add tag') }}
</h2>
<div class="create-tag">
<button v-if="!editing"
class="tagButton"
@click="addTagInput">
{{ t('mail', 'Add tag') }}
</h2>
<div class="create-tag">
<button v-if="!editing"
class="tagButton"
@click="addTagInput">
{{ t('mail', 'Add tag') }}
</button>
<ActionInput v-if="editing" @submit="createTag">
<IconTag :size="20" />
</ActionInput>
<ActionText
v-if="showSaving">
<template #icon>
<IconLoading :size="20" />
</template>
{{ t('mail', 'Saving tag …') }}
</ActionText>
</div>
</button>
<ActionInput v-if="editing" @submit="createTag">
<IconTag :size="20" />
</ActionInput>
<ActionText
v-if="showSaving">
<template #icon>
<IconLoading :size="20" />
</template>
{{ t('mail', 'Saving tag …') }}
</ActionText>
</div>
</Modal>
</template>

<script>
import { NcAppNavigationIconBullet, NcColorPicker, NcModal as Modal, NcActions as Actions, NcActionText as ActionText, NcActionInput as ActionInput, NcActionButton as ActionButton, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
import IconRename from 'vue-material-design-icons/Pencil'
import { NcModal as Modal, NcActionText as ActionText, NcActionInput as ActionInput, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
import IconTag from 'vue-material-design-icons/Tag'
import { showError, showInfo } from '@nextcloud/dialogs'
import { hiddenTags } from './tags.js'
import TagItem from './TagItem'
function randomColor() {
let randomHexColor = ((1 << 24) * Math.random() | 0).toString(16)
Expand All @@ -112,15 +82,11 @@ export default {
name: 'TagModal',
components: {
Modal,
NcColorPicker,
NcAppNavigationIconBullet,
Actions,
ActionText,
ActionInput,
ActionButton,
IconRename,
IconTag,
IconLoading,
TagItem,
},
props: {
envelopes: {
Expand All @@ -143,12 +109,6 @@ export default {
}
},
computed: {
getColor() {
if (this.editColor !== '') {
return this.editColor
}
return this.color
},
tags() {
return this.$store.getters.getTags.filter((tag) => tag.imapLabel !== '$label1' && !(tag.displayName.toLowerCase() in hiddenTags)).sort((a, b) => {
if (a.isDefaultTag && !b.isDefaultTag) {
Expand Down

0 comments on commit 8cdb127

Please sign in to comment.