diff --git a/src/components/AppSidebar/RepeatItem.vue b/src/components/AppSidebar/RepeatItem.vue index d2e91a4b6..6fdb29caf 100644 --- a/src/components/AppSidebar/RepeatItem.vue +++ b/src/components/AppSidebar/RepeatItem.vue @@ -28,6 +28,18 @@ License along with this library. If not, see . + + + + {{ toggleTitle }} + + + +
+ options +
@@ -35,10 +47,17 @@ License along with this library. If not, see . import { translate as t } from '@nextcloud/l10n' import RepeatSummary from './RepeatItem/RepeatSummary.vue' +import Pencil from 'vue-material-design-icons/Pencil.vue' +import Check from 'vue-material-design-icons/Check.vue' +import { NcActions as Actions, NcActionButton as ActionButton } from '@nextcloud/vue' export default { components: { RepeatSummary, + Actions, + ActionButton, + Pencil, + Check, }, props: { recurrence: { @@ -58,8 +77,43 @@ export default { default: null, }, }, + data() { + return { + showOptions: false, + } + }, + computed: { + /** + * The name of the icon for the toggle options button + * + * @return {string} + */ + toggleIcon() { + if (this.showOptions) { + return 'Check' + } + return 'Pencil' + }, + /** + * The text of the toggle options button + * + * @return {string} + */ + toggleTitle() { + if (this.showOptions) { + return this.t('calendar', 'Save') + } + return this.t('calendar', 'Edit') + }, + }, methods: { t, + /** + * Toggle visibility of the options + */ + toggleOptions() { + this.showOptions = !this.showOptions + }, }, } @@ -80,10 +134,33 @@ export default { flex-shrink: 0; } - .property-repeat__summary__content { - display: flex; - align-items: center; - margin-bottom: 5px; + .property-repeat { + width: 100%; + + &__summary { + display: flex; + align-items: center; + margin-bottom: 5px; + + &__icon { + width: 34px; + height: 34px; + margin-left: -5px; + margin-right: 5px; + } + + &__content { + flex: 1 auto; + padding: 0 7px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + &__options { + margin-bottom: 5px; + } } }