Merge pull request #907 from nextcloud/fix/unselect_emoji

fix(EmojiPicker): allow to unselect collective and page emoji
nextcloud · Sep 26, 2023 · 49a134f · 49a134f
2 parents a287430 + fcadcf1
commit 49a134f
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 10 deletions.
diff --git a/cypress/e2e/collective-settings.spec.js b/cypress/e2e/collective-settings.spec.js
@@ -48,9 +48,28 @@ describe('Collective settings', function() {
 			cy.get('button.button-emoji')
 				.click()
 			cy.contains('.emoji-mart-scroll .emoji-mart-emoji', '🥰').click()
+
+			// Test persistence of changed emoji
 			cy.reload()
 			cy.contains('.app-navigation-entry', 'Change me')
 				.find('.app-navigation-entry-icon').should('contain', '🥰')
+
+			// Unset emoji
+			cy.get('.collectives_list_item')
+				.contains('li', 'Change me')
+				.find('.action-item__menutoggle')
+				.click({ force: true })
+			cy.get('button.action-button')
+				.contains('Settings')
+				.click()
+			cy.get('button.button-emoji')
+				.click()
+			cy.contains('.emoji-mart-emoji.emoji-selected', '🥰').click()
+
+			// Test persistence of unset emoji
+			cy.reload()
+			cy.contains('.app-navigation-entry', 'Change me')
+				.find('.app-navigation-entry-icon .collectives-icon')
 		})
 	})
 

diff --git a/cypress/e2e/pages.spec.js b/cypress/e2e/pages.spec.js
@@ -59,12 +59,25 @@ describe('Page', function() {
 			cy.get('#titleform .page-title-icon')
 				.click()
 			cy.contains('.emoji-mart-scroll .emoji-mart-emoji', '🥰').click()
+
+			// Test persistence of changed emmoji
 			cy.reload()
 			cy.get('#titleform .page-title-icon')
 				.should('contain', '🥰')
 			cy.contains('.app-content-list-item', 'Day 1')
 				.find('.app-content-list-item-icon')
 				.should('contain', '🥰')
+
+			// Unset emoji
+			cy.get('#titleform .page-title-icon')
+				.click()
+			cy.contains('.emoji-mart-emoji.emoji-selected', '🥰').click()
+
+			// Test persistence of unset emoji
+			cy.reload()
+			cy.get('#titleform .page-title-icon .emoticon-outline-icon')
+			cy.contains('.app-content-list-item', 'Day 1')
+				.find('.app-content-list-item-icon .collectives-page-icon')
 		})
 		it('Allows setting a page emoji from page list', function() {
 			cy.contains('.app-content-list-item', 'Day 2')

diff --git a/lib/Db/Collective.php b/lib/Db/Collective.php
@@ -19,7 +19,7 @@
  * @method int getPermissions()
  * @method void setPermissions(int $permissions)
  * @method string getEmoji()
- * @method void setEmoji(string $emoji)
+ * @method void setEmoji(?string $emoji)
  * @method int|null getTrashTimestamp()
  * @method void setTrashTimestamp(?int $trashTimestamp)
  * @method int getPageMode()

diff --git a/lib/Db/Page.php b/lib/Db/Page.php
@@ -17,7 +17,7 @@
  * @method string getLastUserId()
  * @method void setLastUserId(string $value)
  * @method string getEmoji()
- * @method void setEmoji(string $value)
+ * @method void setEmoji(?string $value)
  * @method string getSubpageOrder()
  * @method void setSubpageOrder(string $value)
  * @method int|null getTrashTimestamp()

diff --git a/lib/Service/CollectiveService.php b/lib/Service/CollectiveService.php
@@ -282,7 +282,9 @@ public function updateCollective(int $id,
 			throw new NotPermittedException('Member ' . $userId . ' not allowed to update collective: ' . $id);
 		}
 
-		if ($emoji) {
+		if ($emoji === '') {
+			$collectiveInfo->setEmoji(null);
+		} elseif ($emoji) {
 			$collectiveInfo->setEmoji($emoji);
 		}
 

diff --git a/lib/Service/PageService.php b/lib/Service/PageService.php
@@ -291,7 +291,7 @@ private function updatePage(int $collectiveId, int $fileId, string $userId, ?str
 		$page = new Page();
 		$page->setFileId($fileId);
 		$page->setLastUserId($userId);
-		if ($emoji) {
+		if ($emoji !== null) {
 			$page->setEmoji($emoji);
 		}
 		if ($subpageOrder) {

diff --git a/src/components/Icon/CollectivesIcon.vue b/src/components/Icon/CollectivesIcon.vue
@@ -1,7 +1,7 @@
 <template>
 	<span :aria-hidden="!title"
 		:aria-label="title"
-		class="material-design-icon circles-icon"
+		class="material-design-icon collectives-icon"
 		role="img"
 		v-bind="$attrs"
 		@click="$emit('click', $event)">

diff --git a/src/components/Icon/PageIcon.vue b/src/components/Icon/PageIcon.vue
@@ -1,7 +1,7 @@
 <template>
 	<span :aria-hidden="!title"
 		:aria-label="title"
-		class="material-design-icon circles-icon"
+		class="material-design-icon collectives-page-icon"
 		role="img"
 		v-bind="$attrs"
 		@click="$emit('click', $event)">

diff --git a/src/components/Icon/PageTemplateIcon.vue b/src/components/Icon/PageTemplateIcon.vue
@@ -1,7 +1,7 @@
 <template>
 	<span :aria-hidden="!title"
 		:aria-label="title"
-		class="material-design-icon circles-icon"
+		class="material-design-icon collectives-page-template-icon"
 		role="img"
 		v-bind="$attrs"
 		@click="$emit('click', $event)">

diff --git a/src/components/Icon/PagesTemplateIcon.vue b/src/components/Icon/PagesTemplateIcon.vue
@@ -1,7 +1,7 @@
 <template>
 	<span :aria-hidden="!title"
 		:aria-label="title"
-		class="material-design-icon circles-icon"
+		class="material-design-icon collectives-pages-template-icon"
 		role="img"
 		v-bind="$attrs"
 		@click="$emit('click', $event)">

diff --git a/src/components/Nav/CollectiveSettings.vue b/src/components/Nav/CollectiveSettings.vue
@@ -4,7 +4,11 @@
 		:show-navigation="true">
 		<NcAppSettingsSection id="name-and-emoji" :title="t('collectives', 'Name and emoji')">
 			<div class="collective-name">
-				<NcEmojiPicker :show-preview="true" @select="updateEmoji">
+				<NcEmojiPicker :show-preview="true"
+					:allow-unselect="true"
+					:selected-emoji="collective.emoji"
+					@select="updateEmoji"
+					@unselect="unselectEmoji">
 					<NcButton type="tertiary"
 						:aria-label="t('collectives', 'Select emoji for collective')"
 						:title="emojiTitle"
@@ -178,6 +182,7 @@ export default {
 			editPermissions: String(this.collective.editPermissionLevel),
 			sharePermissions: String(this.collective.sharePermissionLevel),
 			pageMode: String(this.collective.pageMode),
+			emoji: null,
 		}
 	},
 
@@ -284,6 +289,7 @@ export default {
 		 * @param {string} emoji Emoji
 		 */
 		updateEmoji(emoji) {
+			console.debug('updateEmoji', emoji)
 			this.load('updateCollectiveEmoji')
 			const collective = { id: this.collective.id }
 			collective.emoji = emoji
@@ -297,6 +303,10 @@ export default {
 			})
 		},
 
+		unselectEmoji() {
+			return this.updateEmoji('')
+		},
+
 		/**
 		 * Rename circle and reload collective
 		 */

diff --git a/src/components/Page.vue b/src/components/Page.vue
@@ -15,7 +15,10 @@
 				<NcEmojiPicker v-else-if="currentCollectiveCanEdit"
 					ref="page-emoji-picker"
 					:show-preview="true"
-					@select="setPageEmoji">
+					:allow-unselect="true"
+					:selected-emoji="currentPage.emoji"
+					@select="setPageEmoji"
+					@unselect="unselectPageEmoji">
 					<NcButton type="tertiary"
 						:aria-label="t('collectives', 'Select emoji for page')"
 						:title="t('collectives', 'Select emoji')"
@@ -279,6 +282,10 @@ export default {
 			await this.setEmoji(this.currentPage.parentId, this.currentPage.id, emoji)
 		},
 
+		unselectPageEmoji() {
+			return this.setPageEmoji('')
+		},
+
 		openPageEmojiPicker() {
 			this.$refs['page-emoji-picker'].open = true
 			this.hide('pageEmojiPicker')