Merge pull request learningequality#640 from AlexVelezLl/merge-v4

Merge release-v4 into develop
BabyElias · May 15, 2024 · 3af2e28 · 3af2e28
2 parents 9fde9ba + 6209b50
commit 3af2e28
Show file tree

Hide file tree

Showing 13 changed files with 290 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,6 +39,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+- [#630]
+  - **Description:** Updates the svg for the pointsLeafActive, and removes the pointsLeafInactive (which is not used anywhere in Kolibri)
+  - **Products impact:** Kolibri (branding)
+  - **Addresses:** -
+  - **Components:** `KIcon` and documentation
+  - **Breaking:** No
+  - **Impacts a11y:** No
+  - **Guidance:** -
+
+[#630]: https://github.com/learningequality/kolibri-design-system/pull/630
+
 - [#627]
   - **Description:** Fix missing anchor tag and heading case in `KTextbox` documentation
   - **Products impact:** None
@@ -326,6 +337,44 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 3.x.x (`release-v3` branch)
 
+- [#583]
+  - **Description:** KDropdownMenu menu support to show context menus with `isContextMenu` prop.
+  - **Products impact:** new API.
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/571, https://github.com/learningequality/studio/issues/4403.
+  - **Components:** KDropdownMenu.
+  - **Breaking:** no.
+  - **Impacts a11y:** no.
+  - **Guidance:** -.
+
+- [#583]
+  - **Description:** New `useKContextMenu` private composable
+  - **Products impact:** - .
+  - **Addresses:** - .
+  - **Components:** - .
+  - **Breaking:** - .
+  - **Impacts a11y:** - .
+  - **Guidance:** -.
+
+- [#583]
+  - **Description:** Expose the event object as second argument on KDropdownMenu's select event.
+  - **Products impact:** updated API.
+  - **Addresses:** - .
+  - **Components:** KDropdownMenu.
+  - **Breaking:** no.
+  - **Impacts a11y:** no.
+  - **Guidance:** -.
+
+- [#583]
+  - **Description:** KDropdownMenu menu support to show a header slot.
+  - **Products impact:** new API.
+  - **Addresses:** - .
+  - **Components:** KDropdownMenu.
+  - **Breaking:** no.
+  - **Impacts a11y:** no.
+  - **Guidance:** -.
+
+[#583]: https://github.com/learningequality/kolibri-design-system/pull/583
+
 - [#611]
   - **Description:** Adds a new `maxWidth` prop
   -  **Products impact:** new API 

diff --git a/custom-icons/pointsLeafActive.svg b/custom-icons/pointsLeafActive.svg
diff --git a/custom-icons/pointsLeafInactive.svg b/custom-icons/pointsLeafInactive.svg
diff --git a/docs/pages/kdropdownmenu.vue b/docs/pages/kdropdownmenu.vue
@@ -12,6 +12,57 @@
       <p>
         Please see the <DocsInternalLink href="/buttons#dropdowns" text="Dropdown section of the Buttons and links page" /> on the buttons page for more details about how to use with a button, and a code example.
       </p>
+
+      <h3>Context menu</h3>
+
+      <p>
+        This component can be also used to create a context menu, which is a dropdown menu that appears when a user right-clicks on an element.
+      </p>
+
+      <DocsShow block>
+        <p>
+          For example, you can right click on this paragraph to see a context menu.
+        </p>
+        <KDropdownMenu
+          isContextMenu
+          :options="[
+            { label: 'Option 1' },
+            { label: 'Option 2' },
+            { label: 'Option 3' },
+          ]"
+        />
+      </DocsShow>
+
+      <DocsShow block>
+        <p>
+          Note that just one context menu can be open at a time. If you right-click on this paragraph, any other context menu will close.
+        </p>
+        <KDropdownMenu
+          isContextMenu
+          :options="[
+            { label: 'Option 1' },
+            { label: 'Option 2' },
+          ]"
+        />
+      </DocsShow>
+
+      <p>
+        To achieve this, set the <code>isContextMenu</code> prop to true.
+        The context menu will then be attached to the parent element.
+      </p>
+      <DocsShowCode language="html">
+        <div>
+          <p> ... </p>
+          <KDropdownMenu
+            isContextMenu
+            :options="[
+              { label: 'Option 1' },
+              { label: 'Option 2' },
+              { label: 'Option 3' },
+            ]"
+          />
+        </div>
+      </DocsShowCode>
     </DocsPageSection>
   </DocsPageTemplate>
 

diff --git a/docs/rstIconReplacements.txt b/docs/rstIconReplacements.txt
@@ -125,8 +125,7 @@
 .. |person| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg></span>`
 .. |pinned| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" fill-rule="evenodd"/></svg></span>`
 .. |plus| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></span>`
-.. |pointsActive| replace:: :raw-html:`<span class="design-system-icon design-system-icon-color-text"><svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="270.8 117.7 84.7 84.8"><path fill="#83759E" d="M292.3 178.4l-21.5 13 11.2 11.1 13.2-21.2z"/><path fill="#9FD29D" d="M334.5 138.9l20.5-20.5c-.9-.9-7.2-.9-15.9.2l-4.6 20.3z"/><path fill="#BADBC4" d="M332.7 119.5c2.2-.3 4.4-.6 6.3-.9l-2.8 12.5-3.5-11.6z"/><path fill="#7CB6A2" d="M316.3 157l6.5-6.5-8.7-26.8c-6.9 2-13.9 4.7-19.5 7.9l21.7 25.4z"/><path fill="#717799" d="M277.9 152.6c.5-2.2 1.4-4.4 2.4-6.3l27.1 19.5-1.9 2.2-27.6-15.4z"/><path fill="#74658E" d="M305.3 167.9l-17.6 17.6c-9.1-9.1-12.3-21.9-9.8-32.9l27.4 15.3z"/><path fill="#749BB5" d="M307.5 165.9l8.9-8.9-6.3-7.4-26-9.4c-1.6 1.9-2.8 4.1-3.7 6.1l27.1 19.6z"/><path fill="#8FD4DC" d="M295.2 144.3l-11.2-4.1c.6-.8 1.2-1.6 1.9-2.2.8-.8 1.7-1.7 2.8-2.5l6.5 8.8z"/><path fill="#6F93A2" d="M288.8 135.5c1.7-1.4 3.6-2.5 5.8-3.8l15.4 18-14.8-5.4-6.4-8.8z"/><path fill="#5CB28F" d="M322.8 150.6l1.9-1.9-6.8-26c-1.3.3-2.5.6-3.8 1.1l8.7 26.8z"/><path fill="#8CBF94" d="M317.9 122.7c5-1.4 10.1-2.4 14.8-3.2l3.5 11.6-1.7 7.8-9.9 9.9-6.7-26.1z"/><path fill="#70B798" d="M351.6 151.2c1.6-6.8 2.7-13.4 3.3-18.7l-18.1 4.1-9.6 9.6 10.4 6.6 14-1.6z"/><path fill="#78CABC" d="M351.6 151.2c-.6 2.8-1.4 5.8-2.4 8.8l-11.7-7.2 14.1-1.6z"/><path fill="#5D7783" d="M313.5 196.2c5.7 0 11.2-1.6 16.1-4.6L317.3 156l-6.8 6.6-6.6 14.5 9.6 19.1z"/><path fill="#736586" d="M313.5 196.2c-5.5 0-11.3-1.3-16.5-3.9l6.9-15.1 9.6 19z"/><path fill="#9794B7" d="M310.5 162.7l-22.8 22.8c2.8 2.8 6 5 9.3 6.8l13.5-29.6z"/><path fill="#457584" d="M334.1 164.9l9.5 10.2c-2.4 4.9-5 9.1-8.2 12.3-.9.9-1.9 1.7-2.8 2.5l1.5-25z"/><path fill="#527D8E" d="M332.6 189.8c-.9.8-1.9 1.4-3 2L317.3 156l4.4-4.4 12.4 13.2-1.5 25z"/><path fill="#619986" d="M343.6 175.1c2.2-4.6 4.1-9.8 5.7-15.1l-22-13.9-5.5 5.5 21.8 23.5"/><path fill="#80C1A8" d="M338.4 135l16.5-16.5c.6.6.8 4.7.3 10.9l-16.8 5.6z"/><path fill="#83CCC0" d="M336.8 136.6l18.1-4.1c.2-1.1.2-2.2.3-3.2l-16.9 5.7-1.5 1.6"/></svg></span>`
-.. |pointsInactive| replace:: :raw-html:`<span class="design-system-icon design-system-icon-color-text"><svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="363.6 113 93.6 93.5"><path fill="#AAA" d="M455 115c-6.5-6.5-60.6 3.9-76.1 19.4-12.6 12.6-13.5 33.7-2.4 49.3l-12.9 9.6 13.2 13.2 9.9-12.8c16.1 11.7 36.5 10.1 49-2.5 15.9-16.1 26.2-69.3 19.3-76.2z"/></svg></span>`
+.. |pointsActive| replace:: :raw-html:`<span class="design-system-icon design-system-icon-color-text"><svg viewBox="0 0 24 24" role="presentation" focusable="false" width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M3.901 7.031c-2.092 2.718-1.773 6.126-.804 8.595a.986.986 0 01-1.836.721c-1.1-2.803-1.608-7.032 1.077-10.52C5.018 2.35 10.614-.047 20.898.183a.986.986 0 01.964.963c.109 4.583-.796 10.94-3.58 15.269-1.406 2.188-3.341 3.927-5.927 4.573-2.423.605-5.259.21-8.532-1.413L1.85 21.546a.986.986 0 11-1.395-1.395l2.29-2.29c.043-.045.09-.093.128-.13a3.207 3.207 0 01.094-.092l3.459-3.46.18-5.36a.986.986 0 111.972.067l-.11 3.252 5.849-5.849a.986.986 0 011.395 1.395l-2.824 2.824 2.16.097a.986.986 0 01-.088 1.97l-3.963-.177-5.695 5.695c2.701 1.225 4.86 1.408 6.574.98 1.96-.49 3.523-1.823 4.747-3.726 2.304-3.583 3.237-8.935 3.273-13.207C10.48 2.082 5.934 4.392 3.9 7.031zm.028 12.436l.032-.031z"/></svg></span>`
 .. |practiceShaded| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.488 7.598l3.924-4.105c.3-.314.715-.493 1.146-.493h6.45c.894 0 1.667.39 1.667 1.325l-7.967 7.807a.5.5 0 00-.15.357v4.007a.5.5 0 00.5.5h4.052a.5.5 0 00.35-.142l3.215-3.144-.009 5.946c0 .935-.723 1.7-1.616 1.7H4.625c-.894 0-1.625-.765-1.625-1.7l.008-10.85c0-.451.17-.884.48-1.207zm4.395.956c.447 0 .813-.383.813-.85V3.879l-4.47 4.675h3.657z" fill="#5DB2C4" fill-opacity=".5"/><path d="M10.008 13.213v2.053c0 .189.149.338.338.338h2.052a.317.317 0 00.237-.102l7.373-7.366-2.532-2.532-7.367 7.366a.331.331 0 00-.1.243zm11.8-6.856a.678.678 0 000-.96l-1.593-1.594a.678.678 0 00-.96 0l-1.247 1.246 2.554 2.555 1.247-1.247z" fill="#5DB2C4"/></svg></span>`
 .. |practiceSolid| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.488 7.598l3.924-4.105c.3-.314.715-.493 1.146-.493h6.45c.894 0 1.667.39 1.667 1.325l-7.967 7.807a.5.5 0 00-.15.357v4.007a.5.5 0 00.5.5h4.052a.5.5 0 00.35-.142l3.215-3.144-.009 5.946c0 .935-.723 1.7-1.616 1.7H4.625c-.894 0-1.625-.765-1.625-1.7l.008-10.85c0-.451.17-.884.48-1.207zm4.395.956c.447 0 .813-.383.813-.85V3.879l-4.47 4.675h3.657z" fill="#5DB2C4"/><path d="M10.008 13.213v2.053c0 .189.149.338.338.338h2.052a.317.317 0 00.237-.102l7.373-7.366-2.532-2.532-7.367 7.366a.331.331 0 00-.1.243zm11.8-6.856a.678.678 0 000-.96l-1.593-1.594a.678.678 0 00-.96 0l-1.247 1.246 2.554 2.555 1.247-1.247z" fill="#5DB2C4"/></svg></span>`
 .. |print| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg></span>`

diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue
@@ -1,29 +1,40 @@
 <template>
 
-  <UiPopover
-    ref="popover"
-    :z-index="99"
-    :containFocus="true"
-    :dropdownPosition="position"
-    :constrainToScrollParent="constrainToScrollParent"
-    @close="handleClose"
-    @open="handleOpen"
-  >
-    <UiMenu 
-      ref="menu" 
-      :options="options" 
-      :hasIcons="hasIcons" 
-      @select="handleSelection" 
-    />
-  </UiPopover>
+  <div>
+    <UiPopover
+      v-if="trigger"
+      ref="popover"
+      :z-index="100"
+      :trigger="trigger"
+      :containFocus="true"
+      :dropdownPosition="position"
+      :positionX="contextMenuPosition[0]"
+      :positionY="contextMenuPosition[1]"
+      :openOn="isContextMenu ? 'manual' : 'click'"
+      :constrainToScrollParent="constrainToScrollParent"
+      @close="handleClose"
+      @open="handleOpen"
+    >
+      <!-- Slot to set a header to the dropdown menu -->
+      <slot name="header"></slot>
+      <UiMenu 
+        ref="menu" 
+        :options="options" 
+        :hasIcons="hasIcons" 
+        @select="handleSelection" 
+      />
+    </UiPopover>
+  </div>
 
 </template>
 
 
 <script>
 
-  import UiPopover from './keen/UiPopover';
+  import { computed } from '@vue/composition-api';
   import UiMenu from './keen/UiMenu';
+  import UiPopover from './keen/UiPopover';
+  import useKContextMenu from './composables/_useKContextMenu';
 
   /**
    * The KDropdownMenu component is used to contain multiple actions
@@ -34,6 +45,21 @@
       UiPopover,
       UiMenu,
     },
+    setup(props) {
+      if (props.isContextMenu) {
+        const { clientX, clientY, isActive } = useKContextMenu();
+        const contextMenuPosition = computed(() => [clientX.value, clientY.value]);
+
+        return {
+          contextMenuPosition,
+          isContextMenuActive: isActive,
+        };
+      }
+      return {
+        contextMenuPosition: [],
+        isContextMenuActive: null,
+      };
+    },
     props: {
       /**
        * The dropdown menu popover flips its position to avoid overflows within the parent. Setting it to false disables the flipping behavior.
@@ -79,6 +105,40 @@
           ].includes(val);
         },
       },
+      /**
+       * Whether or not the dropdown is a context menu, if true, the dropdown will open when
+       * the user right-clicks the parent element
+       */
+      isContextMenu: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        trigger: null,
+      };
+    },
+    watch: {
+      isContextMenuActive() {
+        if (this.isContextMenuActive) {
+          this.$nextTick(() => {
+            this.$refs.popover.open();
+          });
+        } else {
+          this.$refs.popover.close();
+        }
+      },
+      contextMenuPosition() {
+        if (this.isContextMenuActive) {
+          this.$nextTick(() => {
+            this.$refs.popover.open();
+          });
+        }
+      },
+    },
+    mounted() {
+      this.trigger = this.$el.parentElement;
     },
     beforeDestroy() {
       window.removeEventListener('keydown', this.handleOpenMenuNavigation, true);
@@ -135,11 +195,11 @@
           this.closePopover();
         }
       },
-      handleSelection(selection) {
+      handleSelection(selection, $event) {
         /**
          * Emitted when an option is selected
          */
-        this.$emit('select', selection);
+        this.$emit('select', selection, $event);
         this.closePopover();
       },
       closePopover() {

diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js
@@ -397,10 +397,6 @@ const KolibriIcons = {
     icon: require('./precompiled-icons/le/pointsLeafActive.vue').default,
     defaultColor: themeTokens().text,
   },
-  pointsInactive: {
-    icon: require('./precompiled-icons/le/pointsLeafInactive.vue').default,
-    defaultColor: themeTokens().text,
-  },
   classes: { icon: require('./precompiled-icons/le/class.vue').default },
   email: { icon: require('./precompiled-icons/material-icons/mail_outline/baseline.vue').default },
   sidebar: {