Skip to content

Commit

Permalink
Merge pull request #1540 from nextcloud/feature/107/categories
Browse files Browse the repository at this point in the history
Add support for categories
  • Loading branch information
georgehrke authored Oct 26, 2019
2 parents 816c444 + 351c0b0 commit 5ce1704
Show file tree
Hide file tree
Showing 12 changed files with 502 additions and 4 deletions.
40 changes: 40 additions & 0 deletions css/app-sidebar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -459,6 +459,7 @@

.property-text,
.property-select,
.property-select-multiple,
.property-title {
display: flex;
width: 100%;
Expand Down Expand Up @@ -515,6 +516,31 @@
}
}

.property-select-multiple {
.property-select-multiple__input.property-select-multiple__input--readonly {
width: 100%;

.property-select-multiple-colored-tag-wrapper {
align-items: center;
overflow: hidden;
max-width: 100%;
position: relative;
padding: 3px 5px;

.multiselect__tag {
line-height: 20px;
padding: 1px 5px;
background-image: none;
display: inline-flex;
align-items: center;
border-radius: 3px;
max-width: fit-content;
margin: 3px;
}
}
}
}

.property-title {
&__input,
&__input input {
Expand Down Expand Up @@ -632,3 +658,17 @@
margin-left: auto;
}
}

.property-select-multiple-colored-tag {
width: 100%;
display: flex;
align-items: center;

&__color-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
margin-right: 8px;
}
}
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"color-convert": "^2.0.1",
"debounce": "^1.2.0",
"jstz": "^2.1.1",
"md5": "^2.2.1",
"p-limit": "^2.2.1",
"p-queue": "^6.2.0",
"uuid": "^3.3.3",
Expand Down
117 changes: 117 additions & 0 deletions src/components/Editor/Properties/PropertySelectMultiple.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<!--
- @copyright Copyright (c) 2019 Georg Ehrke <oc.list@georgehrke.com>
-
- @author Georg Ehrke <[email protected]>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->

<template>
<div v-if="display" class="property-select-multiple">
<div
class="property-select-multiple__icon"
:class="icon"
:title="readableName" />

<div
class="property-select-multiple__input"
:class="{ 'property-select-multiple__input--readonly': isReadOnly }">
<Multiselect
v-if="!isReadOnly"
:options="options"
:searchable="true"
:placeholder="placeholder"
:tag-placeholder="tagPlaceholder"
:allow-empty="true"
:title="readableName"
:value="value"
:multiple="true"
:taggable="true"
@select="selectValue"
@tag="selectValue"
@remove="unselectValue">
<template v-if="coloredOptions" #tag="scope">
<PropertySelectMultipleColoredTag v-bind="scope" />
</template>
<template v-if="coloredOptions" #option="scope">
<PropertySelectMultipleColoredOption v-bind="scope" />
</template>
</Multiselect>
<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
<div v-else class="property-select-multiple-colored-tag-wrapper">
<PropertySelectMultipleColoredTag
v-for="singleValue in value"
:key="singleValue"
:option="singleValue" />
</div>
</div>

<div
v-if="hasInfo"
v-tooltip="info"
class="property-select-multiple__info icon-details" />
</div>
</template>

<script>
import PropertyMixin from '../../../mixins/PropertyMixin'
import { Multiselect } from '@nextcloud/vue'
import PropertySelectMultipleColoredTag from './PropertySelectMultipleColoredTag.vue'
import PropertySelectMultipleColoredOption from './PropertySelectMultipleColoredOption.vue'

export default {
name: 'PropertySelectMultiple',
components: {
PropertySelectMultipleColoredOption,
PropertySelectMultipleColoredTag,
Multiselect
},
mixins: [
PropertyMixin
],
props: {
coloredOptions: {
type: Boolean,
default: false
}
},
computed: {
display() {
return !(this.isReadOnly && this.value.length === 0)
},
options() {
return this.propModel.options
}
},
methods: {
selectValue(value) {
if (!value) {
return
}

this.$emit('addSingleValue', value)
},
unselectValue(value) {
if (!value) {
return
}

this.$emit('removeSingleValue', value)
}
}
}
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!--
- @copyright Copyright (c) 2019 Georg Ehrke <oc.list@georgehrke.com>
-
- @author Georg Ehrke <[email protected]>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->

<template>
<span class="property-select-multiple-colored-tag">
<div class="property-select-multiple-colored-tag__color-indicator" :style="{ 'background-color': color}" />
<span class="property-select-multiple-colored-tag__label">{{ option }}</span>
</span>
</template>

<script>
import { uidToColor } from '../../../utils/uidToColor.js'

export default {
name: 'PropertySelectMultipleColoredOption',
props: {
option: {
type: String,
required: true
}
},
computed: {
colorObject() {
return uidToColor(this.option)
},
color() {
const color = this.colorObject
return `rgb(${color.r},${color.g},${color.b})`
}
}
}
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!--
- @copyright Copyright (c) 2019 Georg Ehrke <oc.list@georgehrke.com>
-
- @author Georg Ehrke <[email protected]>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->

<template>
<span :key="option" class="multiselect__tag" :style="{ 'background-color': color, 'border-color': borderColor, color: textColor }">
<span>{{ option }}</span>
</span>
</template>

<script>
import { uidToColor } from '../../../utils/uidToColor.js'
import { generateTextColorForRGB } from '../../../utils/color.js'

export default {
name: 'PropertySelectMultipleColoredTag',
props: {
option: {
type: String,
required: true
},
search: {
type: String,
default: undefined
},
remove: {
type: Function,
default: () => {}
}
},
computed: {
colorObject() {
return uidToColor(this.option)
},
borderColor() {
const color = this.colorObject
return `rgb(${color.r},${color.g},${color.b})`
},
color() {
const color = this.colorObject
return `rgba(${color.r},${color.g},${color.b},0.7)`
},
textColor() {
const color = this.colorObject
return generateTextColorForRGB({
red: color.r,
green: color.g,
blue: color.b
})
}
}
}
</script>
43 changes: 43 additions & 0 deletions src/defaults/defaultCategories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**
* Calendar App
*
* @copyright 2019 Georg Ehrke <[email protected]>
*
* @author Georg Ehrke
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
* License as published by the Free Software Foundation; either
* version 3 of the License, or any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU Affero General Public
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
*/
import { translate } from '@nextcloud/l10n'

export default () => {
// This list was taken from https://tools.ietf.org/html/rfc5545#section-5
return [
translate('calendar', 'Anniversary'),
translate('calendar', 'Appointment'),
translate('calendar', 'Business'),
translate('calendar', 'Education'),
translate('calendar', 'Holiday'),
translate('calendar', 'Meeting'),
translate('calendar', 'Miscellaneous'),
translate('calendar', 'Non-working hours'),
translate('calendar', 'Not in office'),
translate('calendar', 'Personal'),
translate('calendar', 'Phone call'),
translate('calendar', 'Sick day'),
translate('calendar', 'Special occasion'),
translate('calendar', 'Travel'),
translate('calendar', 'Vacation')
]
}
3 changes: 3 additions & 0 deletions src/mixins/PropertyMixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ export default {
placeholder() {
return this.propModel.placeholder || ''
},
tagPlaceholder() {
return this.propModel.tagPlaceholder || ''
},
info() {
return this.propModel.info || ''
},
Expand Down
9 changes: 6 additions & 3 deletions src/models/rfcProps.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
*
*/
import { translate } from '@nextcloud/l10n'
import getDefaultCategories from '../defaults/defaultCategories.js'

export default {
// RFC 5545
Expand Down Expand Up @@ -116,11 +117,13 @@ export default {
// },
categories: {
readableName: translate('calendar', 'Categories'),
icon: '',
icon: 'icon-tag',
multiple: true,
default: true,
info: translate('calendar', '')

info: translate('calendar', 'Categories help you to structure and organize your events'),
placeholder: translate('calendar', 'Search or add categories'),
tagPlaceholder: translate('calendar', 'Add this as a new category'),
options: getDefaultCategories()
},
resources: {
readableName: translate('calendar', 'Additional resources'),
Expand Down
Loading

0 comments on commit 5ce1704

Please sign in to comment.