updated menu

dipaksarkar · Apr 25, 2024 · 1584a61 · 1584a61
1 parent 05cb992
commit 1584a61
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -5,9 +5,9 @@
   <meta charset="utf-8">
   <title>Grapesjs Templates</title>
   <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="stylesheets/grapesjs-preset-webpage.min.css">
+  <!-- <link rel="stylesheet" href="stylesheets/grapesjs-preset-webpage.min.css"> -->
   <script src="https://unpkg.com/grapesjs"></script>
-  <script src="https://unpkg.com/grapesjs-preset-webpage@1.0.2"></script>
+  <!-- <script src="https://unpkg.com/grapesjs-preset-webpage@1.0.2"></script> -->
   <style>
     body,
     html {
@@ -36,7 +36,7 @@
         fromElement: true,
         noticeOnUnload: false,
         storageManager: false,
-        plugins: ['grapesjs-preset-webpage', 'grapesjs-templates'],
+        plugins: [/*'grapesjs-preset-webpage',*/ 'grapesjs-templates'],
         pluginsOpts: {
           'grapesjs-templates': {
             templates: 'http://localhost:3000/templates',

diff --git a/src/panels.js b/src/panels.js
@@ -2,7 +2,7 @@ export default (editor, opts = {}) => {
   const { Panels, $, createPopper } = editor
 
   const dropdownMenu = `
-    <ul class="gjs-dropdown-menu">
+    <ul data-offset="-55,15" class="gjs-dropdown-menu">
       <li data-command="save-templates" class="gjs-menu-item">
         <i class="fa fa-save"></i>
         <span class="gjs-menu-label">${editor.I18n.t('grapesjs-templates.save-template')}</span>
@@ -17,12 +17,11 @@ export default (editor, opts = {}) => {
   Panels.addButton('options', {
     id: 'open-templates',
     label:
-      '<svg style="display: block; max-width:22px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path></svg>',
-    className: 'dropdown',
+      '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path></svg>' +
+      dropdownMenu,
+    className: 'gjs-dropdown',
     attributes: {
-      title: editor.I18n.t('grapesjs-templates.template-settings'),
-      'data-dropdown': dropdownMenu,
-      'data-offset': '-55,7'
+      title: editor.I18n.t('grapesjs-templates.template-settings')
     },
     togglable: false
   })
@@ -36,16 +35,16 @@ export default (editor, opts = {}) => {
     let active = false
     const container = $('#popper-container')
 
-    $('.dropdown').click(function ({ target }) {
-      const dropdown = $(this).attr('data-dropdown')
-      const elOffset = $(this).attr('data-offset')
+    $('.gjs-dropdown').click(function ({ target }) {
+      const dropdown = $(this).find('.gjs-dropdown-menu')
+      const elOffset = dropdown.attr('data-offset')
       let offset = [0, 0]
 
       if (elOffset) {
         offset = elOffset.split(',').map((item) => parseFloat(item))
       }
 
-      container.html(dropdown)
+      container.html(dropdown.prop('outerHTML'))
       const popperInstance = createPopper(target, container[0], {
         modifiers: [
           {
@@ -76,7 +75,7 @@ export default (editor, opts = {}) => {
 
     // Event listener to hide dropdown when clicking outside of it
     $(document).on('click', function (event) {
-      if (!$(event.target).closest('.dropdown').length && !$(event.target).closest('#popper-container').length) {
+      if (!$(event.target).closest('.gjs-dropdown').length && !$(event.target).closest('#popper-container').length) {
         active = false
         container.attr('data-show', active)
       }

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -10,6 +10,19 @@ $prefix: 'gjs-' !default;
   z-index: 9999;
 }
 
+.#{$prefix}dropdown {
+  .#{$prefix}dropdown-menu {
+    display: none;
+  }
+}
+
+.#{$prefix}pn-btn {
+  svg {
+    display: block;
+    max-width: 20px;
+  }
+}
+
 .#{$prefix}text-subtitle2 {
   font-size: 0.875rem;
   font-weight: 500;