Space emojis

changelog/unreleased/enhancement-set-emoji-as-space-icon

@@ -0,0 +1,8 @@
+Enhancement: Set emoji as space icon
+
+We've added a new feature to set emojis as space icon, to do so,
+the user needs to click on the 'Set icon' button in the context menu of the respective space
+and has to select an emoji from the emoji picker.
+
+https://github.com/owncloud/web/pull/10546
+https://github.com/owncloud/web/issues/10471

packages/design-system/package.json

@@ -59,6 +59,7 @@
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "6.8.1",
     "deepmerge": "^4.2.2",
+    "emoji-mart": "^5.5.2",
     "file-loader": "^6.2.0",
     "filesize": "^10.1.0",
     "focus-trap": "7.2.0",

packages/design-system/src/components/OcEmojiPicker/OcEmojiPicker.vue

@@ -0,0 +1,104 @@
+<template>
+  <div ref="emojiPickerRef"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, ref, unref, watch } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { Picker } from 'emoji-mart'
+
+/**
+ * Emoji Picker
+ */
+export default defineComponent({
+  name: 'OcEmojiPicker',
+  status: 'ready',
+  release: '1.0.0',
+  props: {
+    theme: {
+      type: String,
+      default: 'light',
+      validator: (value: string) => {
+        return ['light', 'dark'].includes(value)
+      }
+    }
+  },
+  emits: ['emojiSelect', 'clickOutside'],
+  setup(props, { emit }) {
+    const { $gettext, current: currentLanguage } = useGettext()
+    const emojiPickerRef = ref<HTMLElement>()
+
+    watch(
+      [() => props.theme, currentLanguage],
+      async () => {
+        await nextTick()
+        const i18n = {
+          search: $gettext('Search'),
+          search_no_results_1: $gettext('Oh no!'),
+          search_no_results_2: $gettext('That emoji couldn’t be found'),
+          pick: $gettext('Pick an emoji…'),
+          add_custom: $gettext('Add custom emoji'),
+          categories: {
+            activity: $gettext('Activity'),
+            custom: $gettext('Custom'),
+            flags: $gettext('Flags'),
+            foods: $gettext('Food & Drink'),
+            frequent: $gettext('Frequently used'),
+            nature: $gettext('Animals & Nature'),
+            objects: $gettext('Objects'),
+            people: $gettext('Smileys & People'),
+            places: $gettext('Travel & Places'),
+            search: $gettext('Search Results'),
+            symbols: $gettext('Symbols')
+          },
+          skins: {
+            choose: $gettext('Choose default skin tone'),
+            '1': $gettext('Default'),
+            '2': $gettext('Light'),
+            '3': $gettext('Medium-Light'),
+            '4': $gettext('Medium'),
+            '5': $gettext('Medium-Dark'),
+            '6': $gettext('Dark')
+          }
+        }
+
+        const pickerOptions = {
+          onEmojiSelect: (emoji: any) => emit('emojiSelect', emoji.native),
+          onClickOutside: () => emit('clickOutside'),
+          i18n,
+          theme: props.theme
+        }
+        const picker = new Picker(pickerOptions)
+
+        unref(emojiPickerRef).innerHTML = ''
+        unref(emojiPickerRef).appendChild(picker as any)
+      },
+      { immediate: true }
+    )
+
+    return {
+      emojiPickerRef
+    }
+  }
+})
+</script>
+
+<docs>
+```js
+<template>
+  <h3>Light mode OcEmojiPicker</h3>
+  <oc-emoji-picker theme="light" @emoji-select="alert"/>
+  <h3>Dark mode OcEmojiPicker</h3>
+  <oc-emoji-picker theme="dark" @emoji-select="alert"/>
+</template>
+<script>
+  export default {
+    methods: {
+      alert(val) {
+        alert(val)
+      }
+    }
+  }
+</script>
+```
+</docs>

packages/design-system/src/components/OcModal/OcModal.vue

@@ -2,6 +2,7 @@
   <div class="oc-modal-background" aria-labelledby="oc-modal-title">
     <focus-trap :active="true" :initial-focus="initialFocusRef">
       <div
+        :id="elementId"
         ref="ocModal"
         :class="classes"
         tabindex="0"
@@ -112,6 +113,22 @@ export default defineComponent({
   },
 
   props: {
+    /**
+     * Optional modal id
+     */
+    elementId: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Optional modal class
+     */
+    elementClass: {
+      type: String,
+      required: false,
+      default: null
+    },
     /**
      * Modal variation
      * Defaults to `passive`.
@@ -287,7 +304,7 @@ export default defineComponent({
       }
     },
     classes() {
-      return ['oc-modal', `oc-modal-${this.variation}`]
+      return ['oc-modal', `oc-modal-${this.variation}`, this.elementClass]
     },
     iconName() {
       if (this.icon) {

packages/design-system/src/components/index.ts

@@ -49,3 +49,4 @@ export { default as OcTag } from './OcTag/OcTag.vue'
 export { default as OcTextarea } from './OcTextarea/OcTextarea.vue'
 export { default as OcTextInput } from './OcTextInput/OcTextInput.vue'
 export { default as OcErrorLog } from './OcErrorLog/OcErrorLog.vue'
+export { default as OcEmojiPicker } from './OcEmojiPicker/OcEmojiPicker.vue'

packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue

@@ -24,7 +24,12 @@
 <script lang="ts">
 import { computed, defineComponent, inject, Ref, ref, unref, VNodeRef } from 'vue'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
-import { ActionMenuItem, FileActionOptions, SpaceActionOptions } from '@ownclouders/web-pkg'
+import {
+  ActionMenuItem,
+  FileActionOptions,
+  SpaceActionOptions,
+  useSpaceActionsSetIcon
+} from '@ownclouders/web-pkg'
 import { usePreviewService } from '@ownclouders/web-pkg'
 import {
   useSpaceActionsDelete,
@@ -66,6 +71,7 @@ export default defineComponent({
     const { actions: uploadImageActions, uploadImageSpace } = useSpaceActionsUploadImage({
       spaceImageInput
     })
+    const { actions: setSpaceIconActions } = useSpaceActionsSetIcon()
     const { actions: downloadArchiveActions } = useFileActionsDownloadArchive()
 
     const actions = computed(() =>
@@ -75,6 +81,7 @@ export default defineComponent({
         ...unref(duplicateActions),
         ...unref(editDescriptionActions),
         ...unref(uploadImageActions),
+        ...unref(setSpaceIconActions),
         ...unref(editReadmeContentActions),
         ...unref(editQuotaActions),
         ...unref(restoreActions),

packages/web-app-files/src/components/Spaces/SpaceContextActions.vue

@@ -27,7 +27,8 @@ import {
   useSpaceActionsEditReadmeContent,
   useSpaceActionsRename,
   useSpaceActionsRestore,
-  useSpaceActionsShowMembers
+  useSpaceActionsShowMembers,
+  useSpaceActionsSetIcon
 } from '@ownclouders/web-pkg'
 import { isLocationSpacesActive } from '@ownclouders/web-pkg'
 import { computed, defineComponent, PropType, Ref, ref, toRef, unref, VNodeRef } from 'vue'
@@ -60,6 +61,7 @@ export default defineComponent({
     const { actions: editQuotaActions } = useSpaceActionsEditQuota()
     const { actions: editReadmeContentActions } = useSpaceActionsEditReadmeContent()
     const { actions: editDescriptionActions } = useSpaceActionsEditDescription()
+    const { actions: setSpaceIconActions } = useSpaceActionsSetIcon()
     const { actions: renameActions } = useSpaceActionsRename()
     const { actions: restoreActions } = useSpaceActionsRestore()
     const { actions: showDetailsActions } = useFileActionsShowDetails()
@@ -83,7 +85,8 @@ export default defineComponent({
         ...unref(renameActions),
         ...unref(duplicateActions),
         ...unref(editDescriptionActions),
-        ...unref(uploadImageActions)
+        ...unref(uploadImageActions),
+        ...unref(setSpaceIconActions)
       ]
 
       if (isLocationSpacesActive(router, 'files-spaces-generic')) {

packages/web-client/src/webdav/client/dav.ts

@@ -113,7 +113,7 @@ export class DAV {
 
   public put(
     path: string,
-    content: string,
+    content: string | ArrayBuffer,
     {
       headers = {},
       onUploadProgress,
@@ -168,7 +168,7 @@ export class DAV {
       headers,
       options
     }: {
-      body?: string
+      body?: string | ArrayBuffer
       headers?: Headers
       options?: Partial<RequestOptionsCustom>
     } = {}

packages/web-client/src/webdav/putFileContents.ts

@@ -23,7 +23,7 @@ export const PutFileContentsFactory = (
         onUploadProgress = null
       }: {
         path?: string
-        content?: string
+        content?: string | ArrayBuffer
         previousEntityTag?: string
         headers?: Record<string, string>
         overwrite?: boolean

packages/web-pkg/src/components/Modals/EmojiPickerModal.vue

@@ -0,0 +1,35 @@
+<template>
+  <oc-emoji-picker :theme="theme" @emoji-select="onEmojiSelect" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, unref } from 'vue'
+import { Modal, useThemeStore } from '../../composables'
+import { storeToRefs } from 'pinia'
+
+export default defineComponent({
+  name: 'EmojiPickerModal',
+  components: {},
+  props: {
+    modal: { type: Object as PropType<Modal>, required: true }
+  },
+  emits: ['confirm'],
+  setup(props, { emit }) {
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
+
+    const theme = computed(() => {
+      return unref(currentTheme).isDark ? 'dark' : 'light'
+    })
+
+    const onEmojiSelect = (emoji: string) => {
+      emit('confirm', emoji)
+    }
+
+    return {
+      onEmojiSelect,
+      theme
+    }
+  }
+})
+</script>

packages/web-pkg/src/components/Modals/index.ts

@@ -1,2 +1,3 @@
 export { default as ResourceConflictModal } from './ResourceConflictModal.vue'
 export { default as SpaceMoveInfoModal } from './SpaceMoveInfoModal.vue'
+export { default as EmojiPickerModal } from './EmojiPickerModal.vue'

packages/web-pkg/src/composables/actions/spaces/index.ts

@@ -8,3 +8,4 @@ export * from './useSpaceActionsRename'
 export * from './useSpaceActionsRestore'
 export * from './useSpaceActionsShowMembers'
 export * from './useSpaceActionsNavigateToTrash'
+export * from './useSpaceActionsSetIcon'